简单的轮播图思考

自己写的轮播图不是用flex布局在同一行上的，而是用绝对定位，把盒子叠在了一起，点击下一张按钮就把下一个盒子的z-index提高，浮到最上面。

                <div class="row clearfix">
					<ul class="lun">
						<li class="item active"><img src="images/gui2.png"></li>
						<li  class="item"><img src="images/gui3.png"></li>
						<li  class="item"><img src="images/gui4.png"></li>
						<li  class="item"><img src="images/gui6.png"></li>
						<li  class="item"><img src="images/gui1.png"></li>
					</ul>
					<button type="button" class="btn" id="goPre"><</button>
					<button type="button" class="btn" id="goNext">></button>
				</div>

可以看到第一个小li多了一个active的类这个类，这个类在css中添加z-index属性

.item.active{
	opacity: 1;
	z-index: 10;
}

设计的是点击按钮就让这个类名传递给下面的小li

opacity从0-1添加过渡就可以实现下一张图片渐渐显现的轮播效果

下面是js部分

var items = document.getElementsByClassName('item');
		var goPreBtn = document.getElementById('goPre');
		var goNextBtn = document.getElementById('goNext');
		var index = 0;
		var clearActive = function(){
			for (var i = 0; i < items.length ; i++){
				items[i].className= 'item';
			}
		}
		var goIndex =function(){ 
			clearActive();
			console.log(index)
			items[index].className = 'item active';
		}
		var goNext = function(){
			if (index < 4) {
				index++;
			} else{
				index =0;
			}
			goIndex();
		}
		var goPre = function(){
			if (index == 0) {
				index=4;
			} else{
				index --; 
			}
			goIndex();
		}
		goNextBtn.addEventListener('click',function(){
			goNext();
		})
		goPreBtn.addEventListener('click',function(){
			goPre();
		})

js中没有加入stop（）的函数，存在小小bug后期解决