js仿國美在線商城標簽導航焦點圖代碼



91 361 121



特效描述:商城標簽導航 焦點圖代碼,

代碼結構

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

加群請備注:從官網了解到

老夫子电子