css图片轮播效果

因为在个人的项目中用到了轮播图，所以记录一下，巩固基础以及方便日后浏览。

轮播图里有四张图片及前、后两个按钮：

 <div class="wrap">
    <div class="carousel">
      <div><img src="images/1.JPG"></div>
      <div><img src="images/2.JPG"></div>
      <div><img src="images/3.JPG"></div>
      <div><img src="images/4.JPG"></div>
    </div>
 </div>

 <div class="button">
      <button class="pre">上一张</button>
      <button class="next">下一张</button>
 </div>

首先将图片向左浮动成一排，在最外层div设置高度和宽度，然后用overflow：hidden只显示第一张图片，隐藏超出宽度设定的其他图片。样式表如下：

.wrap{position:relative; top:-666px; left:480px; width:473px; min-height:269px; margin:0 auto; overflow:hidden;}

.carousel{position:absolute; transition:all 0.5s ease-in 0s;}

.wrap img{width:100%;}

.carousel div{float:left; text-align:center;}

.button{position:relative; top:-658px; left:484px; text-align:center;}

其中最关键的一点就是：

transition:all 0.5s ease-in 0s;

这是CSS3中的过渡属性，当元素从一种样式变换为另一种样式时为元素添加效果。属性中每个值的意义：过渡的属性，过渡的时间，过渡的效果，延迟开始时间。

我把设置图片的宽度和全部图片的总宽度在js中进行，因为图片的个数可能会变。如果在css中设置，当图片个数变化时，要逐个修改css值，而在js中就可以很灵活。js代码如下：

(function (){
	var carousel = document.querySelector(".carousel");

	var img = carousel.querySelectorAll("div");

	var len = img.length;

	[].forEach.call(img, function (item){
		item.style.width = (100/len) + "%"; //均分每张图片宽度
	});

	carousel.style.left = "0%";	

	carousel.style.width = (100*len) + "%"; //设置全部图片宽度

	var pre = document.querySelector(".pre");

	var next = document.querySelector(".next");

	var i = 0;

	next.onclick = function(){
		var left = carousel.style.left;

		if(i < len-1){
			carousel.style.left = (parseInt(left) -100) + "%";	//还没到最后一张时，left减100%
			
			i++;
		}
		else if(i == len-1){
			carousel.style.left = "0%"; //最后一张时，点击按钮跳到第一张

			i = 0;
		}

	};

	pre.onclick = function(){
		var left = carousel.style.left;

		if(i > 0){
			carousel.style.left = (parseInt(left) + 100) + "%"; //不是第一张时left加100%

			i--;
		}else if(i == 0){
			carousel.style.left = -parseInt(carousel.style.width) + 100 + "%"; //第一张时，点击按钮跳到最后一张

			i = len-1;
		}
	};
}());

当点击按钮时，就会改变元素的left值，即出现轮播图效果。同时又因为设置了transition属性，当left值改变时，会慢速出现过渡效果，在0.5s之内完成。

这样，一个简单的轮播图就完成了

转载于:https://my.oschina.net/u/3415601/blog/900234