3.6.6 轮播图的基本实现 

上一节中,轮播图已经做了一大半,我今天上午抽空把剩下的代码写完了。现在就大概说一下思路吧。 实现上一张和下一张的效果,基本上就是改变ul的margin-left值。为了保证无缝滚动,我们需要在5张图片的首部和尾部各加一张图片。像这样:

<ul>
	<li>
		<a href="javascript:void(0)">
			<img src="img/5.jpg "/>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)">
			<img src="img/1.jpg "/>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)">
			<img src="img/2.jpg "/>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)">
			<img src="img/3.jpg "/>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)">
			<img src="img/4.jpg "/>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)">
			<img src="img/5.jpg "/>
		</a>
	</li>
	<li>
		<a href="javascript:void(0)">
			<img src="img/1.jpg "/>
		</a>
	</li>
	
</ul>

接下来,编写移动图片的方法,为了控制下一张和上一张,我们定义一个索引变量index就可以啦。

var index = 0;

获取图片的宽度的数量

var imgwidth = $('.banner .content ul li').width(); //获取轮播图片的宽度
var len =  $('.banner .content ul li').length - 2//获取总共的图片数量

这几个参数就放在全局作用域中,留着备用。下面就是移动图片的方法。

function movePicture(){
	$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
		if(index == len){
			$(this).css('margin-left',-imgwidth);
			index = 0;
		}
		if(index == -1){
			$(this).css('margin-left',-imgwidth * len);
			index = len - 1;
		}
	});
}

最后,给按钮绑定事件:

rightBtn.on('click',function(){
	index ++;
	movePicture();
});

leftBtn.on('click',function(){
	index --;
	movePicture();
});

思路很清晰,就是当我点击右边的按钮,就把索引index++一下,然后调用移动图片的方法。因为index+1了,所以在移动图片的方法中,就会多移动一个图片的宽度。左边的按钮同理。

image.png

3.6.7 按钮的节流控制

接下来要做一个简单的前台节流,意思就是说,如果有用户闲得无聊,在那拼命的点击下一张的按钮,那么每一次点击都会触发movePicture函数,这个时候,你就会看到图片在那乱跳。


所以,为了避免这种用户的操作,我们需要用js来做一个节流,额,好像是叫节流。我记不太清了。意思就是说,比如你在一秒钟内连续点击了8次,那么我就认为这8次中只有1次是有效的,其他的点击都是误操作。


这样的话,无论你怎么狂点鼠标,我都只调用一次movePicture函数。


首先,我们定义一个空的定时器。

var timer = null;

思路为:

每当我触发按钮的点击事件,就把当前的定时器timer清零,然后又马上给他设置定时内容,比如500毫秒后才进行移动操作。也就是说,如果你狂点鼠标,那么定时器就会被马上清零,然后进入定时器的等待状态。必须要等你满了500毫秒,才进行下面的操作。

原理就是这么简单,这个方式也经常用于登陆按钮上。比如,当你网速很慢的时候,点击登陆,网页没有立即给你跳转页面。有些用户闲着无聊,就在那狂点鼠标,不知道你有没有这么做过呢?

如果没有做好节流,那么就会有大量的请求传递到服务器,会给服务器造成很大的压力。

差不多就是这个意思,上代码:

rightBtn.on('click',function(){
	clearTimeout(timer); //定时器清零
	timer = setTimeout(function(){
		index ++;
		movePicture();
	},500);
	
});

leftBtn.on('click',function(){
	clearTimeout(timer); //定时器清零
	timer = setTimeout(function(){
		index --;
		movePicture();
	},500);
});

不论我鼠标怎么狂点,它每次都只移动一张图片。

好了,轮播图差不多就聊到这里吧,你可以自己去慢慢完善,时间关系我就不扩展太多了。剩下的就交给你自己去玩耍了,比如,我能不能做一个定时轮播呢,每个5秒钟就自动切换到下一张。

我就不写了。

至此,轮播图全部搞定。下面给出lunbo.html的完整源代码,如果实在看不懂逻辑可以在下方留言,我会视情况给出解答,如果实在有必要,我会在下一节详细讲解jQuery轮播图的原理。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
	
	* {
		padding: 0;
		margin: 0;
	}
	ul li {list-style: none;}
	
	.banner {
		height: 380px;
	    margin-top: 20px;
	    position: relative;
	    overflow: hidden;
	}
	
	.banner .content {
		width: 1060px;
	    height: 450px;
	    margin: 20px auto;
	    position: relative;
	}
	
	.banner ul li img {
		width: 1024px ;
		height: 380px ;
	}
	
	.fl {float: left;}
	.fr {float: right;}
	
	.banner .content ul{
		width: 10000px;
	}
	
	.banner .content ul li{
		float:left;
	}
	
	
	
	.btn_left ,.btn_right{
		display: inline-block;
		width: 21px;
		height: 150px;
		background: url(img/banner_tb.png) no-repeat;
		position: absolute;
		left: -38px;
		top: 90px;
		opacity: 0;
		transition: all ease 0.6s;
		cursor:pointer;
	}
	
	.btn_right{
		background-position: -29px 0;
		position: absolute;
		left: 1041px;
		top: 90px;
	}
	
	.banner .content:hover .btn_left{
		opacity: 1;
	}
	
	.banner .content:hover .btn_right{
		opacity: 1;
	}
	
	.banner .content ul{
	    width: 10000px;
	    margin-left: -1024px;
	}

</style>
</head>
<body>
	
<div class='banner'>
	<div class='content'>
		
		<i class='btn_left'></i>
		<i class='btn_right'></i>
	
		<ul>
			<li>
				<a href="javascript:void(0)">
					<img src="img/5.jpg "/>
				</a>
			</li>
			<li>
				<a href="javascript:void(0)">
					<img src="img/1.jpg "/>
				</a>
			</li>
			<li>
				<a href="javascript:void(0)">
					<img src="img/2.jpg "/>
				</a>
			</li>
			<li>
				<a href="javascript:void(0)">
					<img src="img/3.jpg "/>
				</a>
			</li>
			<li>
				<a href="javascript:void(0)">
					<img src="img/4.jpg "/>
				</a>
			</li>
			<li>
				<a href="javascript:void(0)">
					<img src="img/5.jpg "/>
				</a>
			</li>
			<li>
				<a href="javascript:void(0)">
					<img src="img/1.jpg "/>
				</a>
			</li>
			
		</ul>
	</div>
</div>

<script type="text/javascript">
	
	var leftBtn = $('.btn_left').eq(0); //左按钮
	var rightBtn = $('.btn_right').eq(0);//右按钮
		
	
	var ul = $('.banner .content ul').eq(0); 
	
	/* rightBtn.on('click',function(){
		ul.animate({marginLeft : -2048},1000);
	}); */
	
	var index = 0;
	var imgwidth = $('.banner .content ul li').width(); //获取轮播图片的宽度
	var len =  $('.banner .content ul li').length - 2//获取总共的图片数量

	//移动图片的方法
	function movePicture(){
		$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
			
			if(index == len){
				$(this).css('margin-left',-imgwidth);
				index = 0;
			}
			if(index == -1){
				$(this).css('margin-left',-imgwidth * len);
				index = len - 1;
			}
		});
	}
	
	/* //右按钮绑定点击事件
	rightBtn.on('click',function(){
		index ++;
		movePicture();
	});
	
	//左按钮绑定点击事件
	leftBtn.on('click',function(){
		index --;
		movePicture();
	}); */
	
	//节流版本
	
	var timer = 0;
	
	rightBtn.on('click',function(){
		clearTimeout(timer); //定时器清零
		timer = setTimeout(function(){
			index ++;
			movePicture();
		},500);
		
	});

	leftBtn.on('click',function(){
		clearTimeout(timer); //定时器清零
		timer = setTimeout(function(){
			index --;
			movePicture();
		},500);
	});
	
</script>

</body>
</html>