jquery banner滑塊導航條幻燈片輪播圖片滾動



113 449 150



特效描述:滑塊導航條 幻燈片輪播 圖片滾動,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, "新宋體";}
/* changeBox_a1 */
.changeBox_a1{position:relative;height:397px;width:732px;overflow:hidden;margin:30px auto;}
.changeBox_imgs{position:relative;height:354px;width:732px;overflow:hidden;clear:both;}
.changeBox_imgs_list{position:absolute;width:9999px;}
.changeBox_imgs_list li{float:left;height:354px;width:732px;}
/* ul_change */
.ul_change,.ul_change .arrow_bar{background:url(images/bannerTag.gif) no-repeat;}
.ul_change{position:relative;width:1000px;height:43px;left:0px;bottom:0px;background-position:0 0;}
.ul_change .arrow_bar{position:absolute;width:181px;height:34px;background-position:-3px -46px;color:#565253;z-index:8;top:3px;left:3px;cursor:pointer;}
.ul_change li{display:block;_display:inline-block;float:left;position:relative;width:181px;height:40px;line-height:40px;padding-top:3px;z-index:9;margin:0 84px 0 3px;text-align:center;color:#8F8F8F;font-size:14px;font-weight:bolder;font-family:'微軟雅黑','宋體';cursor:pointer;}
</style>
<div id="change_1" class="changeBox_a1">
	<div class="changeBox_imgs">
		<ul class="changeBox_imgs_list">
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="732" height="354" alt="戶外攝影" src="images/banner1.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="732" height="354" alt="戶外攝影" src="images/banner2.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="732" height="354" alt="戶外攝影" src="images/banner3.jpg" /></a></li>
		</ul>
	</div>
	<ul class="ul_change">
		<li id="changeBox_arrow_bar" class="arrow_bar"></li>
		<li class="tagLi3" idx="1">戶外攝影</li>
		<li class="tagLi2" idx="2">戶外攝影</li>
		<li class="tagLi1" idx="3">戶外攝影</li>
	</ul>     
</div>
<script type="text/javascript">
function BannerImages(){
	var b = $("#changeBox_arrow_bar"),
		c = $("ul.ul_change li:not(.arrw_bar)"),
		e = $("ul.changeBox_imgs_list"),
		d = true,
		f = 1; 
	var a = function(){
		var j = (732 * f - 732),j = j == 0 ? 0 : -j,i = 500;
		e.animate({ left: j + "px" }, i)
	};
	e.find("img").hover(function(){
		clearInterval(h)
	},function(){
		g()
	});
	c.click(function(){
		var j = $(this), i = j.position().left + 3;
		f = j.attr("idx");
		a();
		b.animate({ left: i + "px" },500,function(){
			d = true
		})
	}).mouseover(function(){
		if(!d){
			return
		}
		clearInterval(h);
		d = false; 
		$(this).click()
	}).mouseout(function(){
		if(!d){
			return
		}
		g()
	});
	var h = null;
	var g = function(){
		h = setInterval(function(){
			f++;
			if (f > 3){
				f = 1
			}
			c.eq(f).click()
		}, 4000)
	};
	g()
};
$(document).ready(function(){
	BannerImages();//Banner滑動效果
});
</script>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 焦點圖 幻燈片 輪播圖 bar焦點圖 滑動選項卡 滑動切換 純圖片輪播 圖片輪播
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子