最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery banner滑块导航条幻灯片轮播图片滚动

来源:http://www.erdangjiade.com/js/1195.html 二当家的 2017-02-23 13:11浏览(854)

jquery banner滑块导航条幻灯片轮播图片滚动效果实现源码下载

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery banner滑块导航条幻灯片轮播图片滚动
分类:图片代码 > 图片轮播 难易:入门级
查看演示 下载资源: 6

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<div id="change_1" class="changeBox_a1">
	<div class="changeBox_imgs">
		<ul class="changeBox_imgs_list">
			<li><a href="http://www.erdangjiade.com/" target="_blank"><img width="732" height="354" alt="户外摄影" src="images/banner1.jpg" /></a></li>
			<li><a href="http://www.erdangjiade.com/" target="_blank"><img width="732" height="354" alt="户外摄影" src="images/banner2.jpg" /></a></li>
			<li><a href="http://www.erdangjiade.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>
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滑动效果
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1195.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2