利用jQuery实现安全狗网站焦点图特效



75 298 100



特效描述:利用jQuery实现 安全狗网站 焦点图,利用jQuery实现安全狗网站焦点图特效

代码结构

1. 引入CSS

<link href="css/css.css?19" type="text/css" ; rel="stylesheet" />

2. 引入JS

<script src="js/jquery.js?19" type="text/javascript"></script>
<script src="js/slides.min.jquery.js?19" type="text/javascript"></script>

3. HTML代码

<div class="warp">
	<br>
	<!--banner-->
	<div class="banner">
		<div class="slides" id="slides">
			<div class="slides_container" id="banner_nr">
				<!--服务器安全狗  -->
				<div id="b_server" class="slide">
					<div class="b_right">
						<div class="b_bt_server">
							<a href="http://51qianduan.com/"></a></div>
						<div class="b_btn">
							<div class="green_btn01">
								<a href="http://51qianduan.com/" id="fwqV4.0" onclick="downloadsoftNum('1');_hmt.push(['_trackEvent', 'software', 'download', 'fwqV4.0'])">
								免费下载</a></div>
							<div style="color:#ff0000;padding-top:20px; padding-left:10px">
								<span style="color:#ff0000;padding-top:20px; font-size:18px; padding-left:15px">
								新版上线</span> </div>
						</div>
						<div class="b_Software">
							版本: V4.0正式版 <span>大小:30.7MB</span> <span>更新:2013-07-24</span>
							<span><a href="http://51qianduan.com/">详情&gt;&gt;</a></span>
							<p>适合:Windows2003/Windows2008/Windows2012 </p>
						</div>
					</div>
				</div>
				<div id="b_web" class="slide">
					<div class="b_right">
						<div class="b_bt_web">
							<a href="http://51qianduan.com/"></a></div>
						<div class="b_btn">
							<div class="green_btn01" style="font-size:21px ">
								<a onclick="downloadsoftNum('2');_hmt.push(['_trackEvent', 'software', 'download', 'wzIIS'])" id="wzIIS" href="download/software/safedogwzIIS.exe">
								IIS版下载</a> </div>
						</div>
						<div class="web_download">
							<a style="color:#fff;" href="http://51qianduan.com/" id="wzApache" onclick="downloadsoftNum('2');_hmt.push(['_trackEvent', 'software', 'download', 'wzApache']);">
							Apache版下载</a>
							<a style="color:#fff;" href="http://51qianduan.com/" id="wzLinux32" onclick="downloadsoftNum('4');_hmt.push(['_trackEvent', 'software', 'download', 'wzLinux32']);">
							LinuxV1.0(32位)下载</a>
							<a style="color:#fff;" href="http://51qianduan.com/" id="wzLinux64" onclick="downloadsoftNum('4');_hmt.push(['_trackEvent', 'software', 'download', 'wzLinux64']);">
							LinuxV1.0(64位)下载</a> </div>
						<div class="b_Software" style="margin-top:60px;_margin-top:20px;padding-left:10px">
							IIS版本:V3.0 正式版 <span>大小:23.9MB</span> <span>更新:2013-06-09</span>
							<span><a href="website_safedog.html">详情&gt;&gt;</a></span>
							<p>适合:Win2003 IIS6.0/Win2008 IIS7.0/Win2012 IIS8.0</p>
						</div>
					</div>
				</div>
				<div id="b_backup" class="slide">
					<div class="b_right">
						<div class="b_bt_backup">
							<a href="http://51qianduan.com/"></a></div>
					</div>
				</div>
				<div id="b_iphone" class="slide">
					<div class="b_right">
						<div class="b_bt_phone">
							<a href="http://51qianduan.com/"></a></div>
						<div class="b_btn">
							<div class="green_btn01">
								<a href="http://51qianduan.com/" id="fwqLinux32" onclick="downloadsoftNum('3');_hmt.push(['_trackEvent', 'software', 'download', 'fwqLinux32']);">
								32位下载</a> </div>
							<div class="green_btn01" style="margin-left:20px">
								<a href="http://51qianduan.com/" id="fwqLinux64" onclick="downloadsoftNum('3');_hmt.push(['_trackEvent', 'software', 'download', 'fwqLinux64']);">
								64位下载</a> </div>
						</div>
						<div class="b_Software">
							版本:V2.3 正式版 <span>大小:6.28MB</span> <span>更新:2013-08-07</span>
							<span><a href="http://51qianduan.com/">详情&gt;&gt;</a></span>
							<p>适合:Ubuntu/Centos/Fedora/RHEL <span>
							<a href="http://51qianduan.com/">
							教程下载&gt;&gt;</a></span></p>
						</div>
					</div>
				</div>
				<div id="b_cloud" class="slide">
					<div class="b_right">
						<div class="b_bt_cloud">
							<a href="http://51qianduan.com/"></a></div>
						<div class="b_btn">
							<div class="green_btn01">
								<a href="http://51qianduan.com/" id="cloudClient" onclick="downloadsoftNum('5');_hmt.push(['_trackEvent', 'software', 'download', 'cloudClient']);">
								免费下载</a></div>
						</div>
						<div class="b_Software">
							版 本: V1.0 正式版 <span>大小:9MB</span> <span>更新:2013-02-20</span>
							<span><a href="http://51qianduan.com/">详情&gt;&gt;</a></span>
							<p>适合:Win8/Win7/Vista(32/64位)/XP(32位)</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="banner_nav">
			<ul id="navul">
				<li class="b_text06">
				<a href="#" id="navul1" onclick="changeMain(this,'0')" class="banner_navhover">
				服务器安全狗</a></li>
				<li class="b_text05">
				<a href="#" id="navul2" onclick="changeMain(this,'1')">网站安全狗</a></li>
				<li class="b_text03">
				<a href="#" id="navul3" onclick="changeMain(this,'2')">云备份</a></li>
				<li class="b_text06">
				<a href="#" id="navul4" onclick="changeMain(this,'3')">服务器安全狗Linux</a></li>
				<li class="b_text06">
				<a href="#" id="navul5" onclick="changeMain(this,'4')">云中心客户端</a></li>
			</ul>
		</div>
	</div>
</div>
<br>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片 导航切换 图片切换 图片轮播 全屏焦点图 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到