制作轮播图

今天制作了一个自动轮播图，记录一下

方法：

利用一个无序列表，将图片放置1行，控制 ul的left控制当前显示的是哪张图片，利用动画显示左右切换的效果。
监听resize事件，让大小自动适应

Github demo地址：
https://github.com/huxinxue/demo/blob/master/轮播图片.rar
满意的话就star一下吧

效果展示：

话不多说，直接上代码：
html:

<!-- 图片 -->
	<ul>
		<li class="img1"></li>
		<li class="img2"></li>
		<li class="img3"></li>
		<li class="img4"></li>
		<li class="img5"></li>
		
	</ul>
	<!-- 小圆点 -->
	<div>
		<p>
		<span class="active">&nbsp;</span>
		<span>&nbsp;</span>
		<span>&nbsp;</span>
		<span>&nbsp;</span>
		</p>
	</div>

注意

1. 所有图片都在同一行，通过设置 li的背景图显示图片
2. css中 .img1 与 .img5 对应是同一张图片

js:

var num = 5;
	var h = window.screen.height;
	// var w = window.screen.width;
	var w = document.body.clientWidth;

	$("ul").width(w * num);
	$("li").height(window.screen.height );
	$("li").width(w );
	$("div p").width(w);
	var spans = $('span');

	var i = 0;
	var j = 0;

	//递归调用，循环执行
	//.img的执行顺序  1，2，3，4，5，2，3，4，5，2。。。。
	//图片的循环顺序： 1，2，3，4，1，2，3，4，1，2。。。。
	function scroll(argument) {
		//去掉当前小圆点的active
		$(spans[j]).removeClass("active");

		i++;
		j++;
		if(i==num) {
			// 图片循环
			i = 0;
			$("ul").css("left",0);
			i++;
		}
		if(j==num-1){
			// 小圆点循环
			j=0;
		}

		// 利用向左移动更换图片
		$("ul").animate({left:"-"+w*i+"px"},"slow");
		//加上目标小圆点的active
		$(spans[j]).addClass("active");

		// 循环调用
		setTimeout(scroll,3000);
	}

	setTimeout(scroll,3000);



	window.onresize = function(){
		// 大小改变时重置各元素的宽度
	w = document.body.clientWidth;
	$("ul").width(w * num);
	$("li").width(w);
	$("div p").width(w);
	$("ul").css("left",-1*w*i);
	}