js仿国美在线商城标签导航焦点图代码



89 354 119



特效描述:商城标签导航 焦点图代码,

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<div class="Jslide" id="Jslide">
	<div class="slide-list" id="slide-list"> 	
		<div class="slide-ul" style="display:block;">
			<ul>
				<li class="w1" style="display:block;"><a href="http://dijiuzhanzhang.com/" class="a_0" title="" rel="nofollow" target="_blank"><img src="images/20150721sj1.jpg" big-src="images/20150721sj1.jpg" min-src="images/20150721sj1z.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/01彩电ggg.png" min-src="images/第二帧彩电抄底季放价zhai.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/冰洗gfggf.png" min-src="images/0720冰洗窄g.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/"  class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/kogntiaoggg.jpg" min-src="images/空调hhhz.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?17/mdkt717.html?intcmp=sy-C-3-2-1-aks"  class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/ktggggg.jpg" min-src="images/ktgggggz.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?dnzj.html?intcmp=sy-C-4-1-1-sj" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/0720电脑g.jpg" min-src="images/0720电脑窄屏g.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?20150715023906_topics.html?intcmp=sy-C-4-2-1-dn" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/手机改ggggg.jpg" min-src="images/手机窄改.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?song-chudadiERbo.html?intcmp=sy-C-5-1-1-cx" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/0721厨卫大电.jpg" min-src="images/0721厨卫大电窄.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?an-dfsk720.html?intcmp=sy-C-5-2-1-cw" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/小家电ffdd.jpg" min-src="images/小家电ffddz.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?kkqjbsf.html?intcmp=sy-C-6-1-1-jd" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/dajiadian0721k.jpg" min-src="images/dajiadian0721z.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/xiaojiadian0721k.jpg" min-src="images/xiaojiadian0721z.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?sjxly-blyx.html#1?intcmp=sy-C-7-1-1-kx" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/gomecs0722k.jpg" min-src="images/gomecs0722z.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?fzcsjll.html?intcmp=sy-C-7-2-1-jz" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/fuzhuangcheng0722k.jpg" min-src="images/fuzhuangcheng0722z.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
		<div class="slide-ul">
			<ul>
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?sjhwm2.html?intcmp=sy-C-8-1-1-rs"  class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/大牌0722.jpg" min-src="images/大牌小0722.jpg" alt="" /></a>
				</li>	
				<li class="w1" style="display:block;">	
				<a href="http://dijiuzhanzhang.com/?20140606022741_topics.html?intcmp=sy-C-8-2-1-hr"  class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/苹果ggghhh.jpg" min-src="images/0721sj9z苹果z.jpg" alt="" /></a>
				</li>	
			</ul>    
		</div>
	</div>
	<ul class="slide-tab" id="slide-tab">
		<li class="current" >
			<div class="text">
				<em></em>
				<span>今日头条</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">制冷节</a>
			</div>
		</li>
		<li>
			<div class="text">
				<em></em>
				<span>电视冰洗</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">彩电抄底季放价</a>
				<a href="#" hidefocus="true">冰洗钜惠</a>
			</div>
		</li>
		<li>
			<div class="text">
				<em></em>
				<span>空调</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">空调抗暑大战</a>
				<a href="#" hidefocus="true">美的空调</a>
			</div>
		</li>
		<li  >
			<div class="text">
				<em></em>
				<span>3C数码</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">电脑节</a>
				<a href="#" hidefocus="true">手机冰点价</a>
			</div>
		</li>
		<li  >
			<div class="text">
				<em></em>
				<span>烟灶小电</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">国美横扫厨卫价</a>
				<a href="#" hidefocus="true">小家电满减</a>
			</div>
		</li>
		<li  >
			<div class="text">
				<em></em>
				<span>平台家电</span>
			<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">果粉首发</a>
				<a href="#" hidefocus="true">小家电</a>
			</div>
		</li>
		<li  >
			<div class="text">
				<em></em>
				<span>生活百货</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">好货8元起</a>
				<a href="#" hidefocus="true">服饰大放价</a>
			</div>
		</li>
		<li  class="last">
			<div class="text">
				<em></em>
				<span>大牌特惠</span>
				<div class="num"></div>
			</div>
			<div class="item">	                
				<a href="#" hidefocus="true">华为新品</a>
				<a href="#" hidefocus="true">Apple手机</a>
			</div>
		</li>
	</ul>
	<a href="#" class="dir go_l" id="go_l" hidefocus="true"></a>
	<a href="#" class="dir go_r" id="go_r" hidefocus="true"></a>
</div>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 导航切换 菜单切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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