jquery焦點圖片輪播滾動類似選項卡滑動切換



120 479 160



特效描述:jquery 焦點圖 輪播滾動 選項卡滑動切換,jquery圖片滾動插件制作banner焦點圖片輪播滾動切換,鼠標滑過縮略圖圖片向左滾動顯示相應的大圖,類似選項卡滑動切換效果的焦點圖片展示。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋體";}
/* focusbox */
.focusbox{width:990px;height:405px;position:relative;margin:20px auto;overflow:hidden;}
.arrowbtn{background:#ddd;width:60px;height:60px;cursor:pointer;position:absolute;top:100px;}
.prebtn{left:0;}
.nextbtn{right:0;}
.contentimg{position:absolute;top:0;left:0;width:7000px;}
.contentimg li{width:990px;height:340px;float:left;margin-right:10px;overflow:hidden;}
.contentimg li img{width:990px;height:340px;}
.contentdesc{
	position:absolute;top:0;right:0;width:282px;height:340px;background:rgba(0,0,0,0.7);overflow:hidden;
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#B2000000', endColorstr='#B2000000');
}
.contentdesc .desc{color:#dadada;}
.contentdesc .desc h4{font-size:15px;font-weight:bold;color:#fff;}
.contentdesc .desc strong{color:#e4007f;}
.contentdesc .desc .def_ico{display:inline-block;*display:inline;zoom:1;width:68px;height:18px;overflow:hidden;background:url(images/T193mCXnRQXXXXXXXX-300-300.png) no-repeat -112px -129px;vertical-align:middle;}
.contentdesc .desc .stars{display:inline-block;width:53px;height:10px;background:url(images/T1t2aCXnVZXXXXXXXX-53-10.png) no-repeat;}
.contentdesc .desc_btn{display:block;width:119px;height:38px;background:url(images/T1VzKGXbNpXXXXXXXX-119-38.png) no-repeat;margin-top:12px;}
.contentdesc li{width:262px;height:320px;padding:20px 0 0 20px;}
.focusbox .navbox{width:1000px;overflow:hidden;position:absolute;right:-12px;bottom:0;}
.focusbox .navbox li{width:139px;height:55px;overflow:hidden;float:left;margin-right:2px;}
.focusbox .navbox li img{width:139px;height:55px;}
.focusbox .navbox li.selected{width:137px;height:53px;border:1px solid #ff32a5;}
.focusbox .navbox li.selected img{width:137px;height:53px;}
</style>
<div class="focusbox">
	<div class="contentbox">
		<ul class="contentimg">
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1NzqUXehxXXXXXXXX-990-340.jpg" title="金陵十三釵"></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1DJWVXgNaXXXXXXXX-990-340.jpg" title="哈利波特與死亡圣器(下)"></a></li>  
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1VuqVXfRXXXXXXXXX-990-340.jpg" title="失戀33天"></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1gQaUXahwXXXXXXXX-990-340.jpg" title="驚天戰神"></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1r7uUXgXvXXXXXXXX-990-340.jpg" title="八星抱喜"></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1eDuGXjFsXXXXXXXX-990-340.jpg" title="弱點"></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="990" height="340" src="images/T1MEqGXadpXXXXXXXX-990-340.jpg" title="盜夢空間"></a></li>
		</ul>
		<ul class="contentdesc">
			<li class="ac-tive">
				<div class="desc">            
					<h4>金陵十三釵</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:克里斯蒂安·貝爾</p>
					<p style="text-indent:3em;">倪妮</p>
					<p>類型: 戰爭 歷史</p>
					<p>上映時間: 2011-12-15(中國)</p>
					<p style="padding-bottom:10px;">授權有效期:購買后48小時內可任意觀看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>5.00</strong>元</p>
					<p>已售出:<strong>433</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有80人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div> 
			</li>
			<li>
				<div class="desc">            
					<h4>哈利波特與死亡圣器(下)</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:丹尼爾·雷德克里夫</p>
					<p style="text-indent:3em;">愛瑪·沃森</p>
					<p>類型:  動作 青春 魔幻</p>
					<p>上映時間: 2011-08-04(中國)</p>
					<p style="padding-bottom:10px;">授權有效期: 2012年11月30日前均可看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>7.00</strong>元</p>
					<p>已售出:<strong>1832</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有550人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div> 
			</li>    
			<li>
				<div class="desc">            
					<h4>失戀33天</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:文章</p>
					<p style="text-indent:3em;">白百何</p>
					<p>類型: 愛情 喜劇</p>
					<p>上映時間: 2011-11-08(中國)</p>
					<p style="padding-bottom:10px;">授權有效期: 購買后48小時內可任意觀看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>5.00</strong>元</p>
					<p>已售出:<strong>5774</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有1856人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div>      
			</li>
			<li>
				<div class="desc">            
					<h4>驚天戰神</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:亨利·卡維爾</p>
					<p style="text-indent:3em;">米基·洛克</p>
					<p>類型: 奇幻 動作</p>
					<p>上映時間: 2011-11-11(中國)</p>
					<p style="padding-bottom:10px;">授權有效期: 購買后48小時內可任意觀看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>5.00</strong>元</p>
					<p>已售出:<strong>32</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有5人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div>  
			</li>
			<li> 
				<div class="desc">            
					<h4>八星抱喜</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:古天樂</p>
					<p style="text-indent:3em;">吳君如</p>
					<p>類型: 喜劇</p>
					<p>上映時間: 2012-01-20(中國)</p>
					<p style="padding-bottom:10px;">授權有效期: 購買后48小時內可任意觀看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>5.00</strong>元</p>
					<p>已售出:<strong>20</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有1人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div>  
			</li>
			<li>
				<div class="desc">            
					<h4>弱點</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:桑德拉·布洛克</p>
					<p style="text-indent:3em;">蒂姆·麥格羅</p>
					<p>類型: 劇情</p>
					<p>上映時間:  2009-11-20(美國)</p>
					<p style="padding-bottom:10px;">授權有效期: 2012年11月30日前均可看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>1.49</strong>元</p>
					<p>已售出:<strong>175</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有48人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div>                   
			</li>
			<li>
				<div class="desc">            
					<h4>盜夢空間</h4>
					<h4>獨家正版在線觀看!</h4>
					<p style="padding-top:10px;">演員:萊昂納多·迪卡普里奧</p>
					<p style="text-indent:3em;">約瑟夫·高登-萊維特</p>
					<p>類型: 劇情 科幻 懸疑</p>
					<p>上映時間:  2010-09-01(美國)</p>
					<p style="padding-bottom:10px;">授權有效期: 2012年11月30日前均可看</p>
					<p>清晰度:<span class="def_ico"></span></p>
					<p>價格:<strong>5.00</strong>元</p>
					<p>已售出:<strong>259</strong>件</p>
					<p>評 價:<span class="stars"></span>(已有65人評論)</p>
					<a class="desc_btn" href="http://www.dijiuzhanzhang.com/" title="在線預覽"></a>           
				</div>      
			</li>
		</ul>
	</div>
	<div class="navbox">
		<ul class="mfoc_nav">
			<li _index="1" class="selected"><img width="137" height="53" src="images/T1bISVXltcXXXXXXXX-137-53.jpg" alt="金陵十三釵" /></li>
			<li _index="2"><img width="137" height="53" src="images/T1ccSVXlBcXXXXXXXX-137-53.jpg" alt="哈利波特與死亡圣器(下)" /></li>
			<li _index="3"><img width="137" height="53" src="images/T17ZOVXlxcXXXXXXXX-137-53.jpg" alt="失戀33天" /></li>
			<li _index="4"><img width="137" height="53" src="images/T15IOVXlRcXXXXXXXX-137-53.jpg" alt="驚天戰神" /></li>
			<li _index="5"><img width="137" height="53" src="images/T11IOVXl0cXXXXXXXX-137-53.jpg" alt="八星抱喜" /></li>
			<li _index="6"><img width="137" height="53" src="images/T1fmmGXjhwXXXXXXXX-137-53.jpg" alt="弱點" /></li>     
			<li _index="7"><img width="137" height="53" src="images/T1VCWGXdluXXXXXXXX-137-53.jpg" alt="盜夢空間" /></li> 
		</ul>
	</div>
</div>   
<script type="text/javascript">
(function(jQuery){
	jQuery.fn.th_focus_swing = function(options)
	{
		var defaults = {
			time		:3500,		//輪換秒數
            index		:1,			//默認第幾張		
			speed		:500,		//切換時間
			dis			:1000,
			splits 		:1			//總標簽
		};
		var opts = jQuery.extend(defaults, options);
		var _index = opts.index;
		var _time = opts.time;
		var _speed = opts.speed;
		var _dis = opts.dis;
		var _splits = opts.splits;
		var _this = jQuery(this);
		var node_ul = _this.find(".contentimg");	
		var node_li = node_ul.find("li");
		var node_li_desc = jQuery(".contentdesc").find("li");
		var node_li_nav = jQuery(".mfoc_nav").find("li");
		var li_len = node_li.length;
		var _countIndex = (node_li.length/opts.split -  1)    
		var _start_left = node_ul.css("left");                
		var _timer = setInterval(show, _time);
        init();
		//alert(1);
		function init() {
			node_ul.mouseover(function() {
				_timer = clearInterval(_timer);
			}).mouseout(function() {
				_timer = setInterval(show, _time);
			});
			node_li_desc.mouseover(function() {
				_timer = clearInterval(_timer);
			}).mouseout(function() {
				_timer = setInterval(show, _time);
			});
			node_li_nav.mouseover(function() {
				 node_ul.stop(true, true);
				 node_li_desc.stop(true, true);
				 node_li_desc.eq(_index-1).css("display", "none");
				 node_li_nav.eq(_index-1).removeClass("selected");
				 _index = parseInt(jQuery(this).attr("_index"));
				 node_li_desc.eq(_index-1).fadeIn(_speed);
				 node_li_nav.eq(_index-1).addClass("selected");
				 _left = -_dis*(_index - 1); 
				 node_ul.animate({"left": _left}, _speed);
				_timer = clearInterval(_timer);
			}).mouseout(function() {
				_timer = setInterval(show, _time);
			});
		}
		function show() {
                        //alert(2);
			node_ul.stop(true, true);
			node_li_nav.eq(_index-1).removeClass("selected");
			node_li_desc.eq(_index-1).css("display", "none");
			_index++;
			if(_index > li_len) {
				node_ul.append(node_ul.find("li:lt(1)"));
				node_ul.css("left", parseInt(node_ul.css("left")) + _dis);
				node_li_nav.eq(0).addClass("selected");
				node_li_desc.eq(0).fadeIn(_speed);
			}
			else {
				node_li_nav.eq(_index-1).addClass("selected");
				node_li_desc.eq(_index-1).fadeIn(_speed);
			}
			var _left = parseInt(node_ul.css("left")) - _dis;
			node_ul.animate({"left": _left}, _speed, function() {
					if(_index > li_len) {
						node_ul.prepend(node_ul.find("li:gt("+(li_len-_splits-1)+")"));
						node_ul.css("left", 0);
						_index = 1;
					}
			});
		}
	}
})(jQuery);
</script>
<script>
$(document).ready(function(){
	//focus
	$(".focusbox").th_focus_swing();
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 滾動切換 滾動條切換 帶縮略圖的幻燈片 圖片滾動 圖片滾動條 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 自動滾動圖片輪播
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子