轮播图组件

第一种，比较高大上哈哈哈哈哈，用起来比较方便，API封装的思想很值得学习

step1：结构设计
html页面中将图片包含在一组列表中，代码如下：

<div id="list" class="list">
<ul>
    <li class="list-item-one"><img src="image/image1.jpg"></li>
    <li class="list-item"><img src="image/image2.jpg"></li>
    <li class="list-item"><img src="image/image3.jpg"></li>
    <li class="list-item"><img src="image/image4.jpg"></li>
    <li class="list-item"><img src="image/image5.jpg"></li>
</ul>   
</div>

step2：设置样式，所有图片层叠在一起，通过对图片透明度的改变来实现轮播图的显示，并且切换的时候有过渡哦^_^

*{
    margin:0;
    padding:0;
}
.list{
    height:590px;
    position:relative;
    overflow: hidden;
}
.list ul{
    list-style-type:none;
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.list-item,
.list-item-one{
    position:absolute;  //因为图片是重叠在一起的，所以用absolute
    opacity: 0;
    transition:opacity 1s;
}
.list-item-one{    //图片正常显示时的样式
    transition:opacity 1s;
    opacity:1;
}

step3：API设计，用面向对象的方式将其封装为一个组件对象，方便使用

class Slider{
    constructor(id){
        this.container=document.getElementById(id);
        this.items=this.container.querySelectorAll('.list-item,.list-item-one');
    }
    getSelectorItem(){  //获得当前展示的图片
        let selected=this.container.querySelector('.list-item-one');
        return selected;
    }
    getSelectorItemIndex(){  //当前选中的图片的位置
        return Array.from(this.items).indexOf(this.getSelectorItem());
    }
    slideTo(idx){   //跳转到idx这一张图片
        let selected=this.getSelectorItem();
        if(selected){
            selected.className="list-item";
        }
        let item=this.items[idx];
        if(item){
            item.className="list-item-one";
        }
    } 
    slideNext(){   //下一张
        let currentIdx=this.getSelectorItemIndex();
        let nextIdx=(currentIdx+1)%this.items.length;
        this.slideTo(nextIdx);
    }
    slidePrevious(){   //上一张
        let currentIdx=this.getSelectorItemIndex();
        let previousIdx=(this.item.length+currentIdx-1)%this.items.length;
        this.slideTo(previousIdx);
    }

}

let slider=new Slider('list');
setInterval(slider.slideNext.bind(slider),3000);

第二种，简单易懂，没有什么特别的技巧（html和css文件和第一种相同）

window.onload=function(){
    var pic=document.getElementById('list');
    var list=pic.querySelectorAll('.list-item,.list-item-one');
    var timer=null;
    var index=0;
    function autochange(){   //自动切换图片
        if(++index>=list.length)
            index=0;
        changepic(index);
    }
    function changepic(idx){  //改变图片样式来显示
        for(var i=0;i<list.length;i++){
            list[i].className="list-item";
        }
        list[idx].className="list-item-one";
    }
    timer=setInterval(autochange,3000);   //定时器，3s切换一次
    pic.onmouseover=function(){  //鼠标放上去的时候不发生切换
        clearInterval(timer);
    }
    pic.onmouseout=function(){   //鼠标离开时切换继续
        timer=setInterval(autochange,3000);
    }
}