js轮播图实现

思路：
我认为用动画的形式优于算距离的形式。
轮播盒

先设置轮播盒的宽高和定位，由于图片和ul要依赖于轮播盒来定位故轮播盒的position设置为relative.
图片

我这里用了6张图片，由于一开始就要显示第一张所以把第一张图片的class设置为show

按钮

有几张图片就设置几个li，与图片同理将第一个设置为active

以下是html代码

<div class="images" id="images">
                        <img src="images/music/img1.jpg" alt="" class="show">
                        <img src="images/music/img2.jpg" alt="">
                        <img src="images/music/img3.jpg" alt="">
                        <img src="images/music/img4.jpg" alt="">
                        <img src="images/music/img5.jpg" alt="">
                        <img src="images/music/img6.jpg" alt="">
                        <ul>
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

以下是css代码

 .images{
    width: 590px;
    height: 250px;
    position: relative;
}
 .images img{
    width: 100%; height: 100%;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    animation-timing-function: linear;
	animation-duration:0.7s;
	animation-fill-mode:forwards;
}

.images img.show{
    animation-name: show;
}
.images img.unshow{
    animation-name: disapper;
}

 .images ul{
    position: absolute;
    bottom: 10px; left: 240px; 
}
 .images ul li{
    width: 12px; height: 12px;
	float: left;
	background: rgba(255,255,255,0.7);
	margin-right: 8px;
	border-radius: 50%;
	cursor: pointer;
}、
 .images ul li.active{
    background: orange;
}
@keyframes show{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes disappear{
	from{opacity:1;}
	to{opacity:0;}
}

解析样式

img设置为和父元素即div的宽高一样即充满父元素，将posiztion设置为绝对定位，且都定位再left:0 top：0位置这样元素都会层叠再同一个区域，然后再将所有img元素的透明图调至0这样所有的元素都透明的层叠再该处且由于在任意时刻只会有一张图片显示，所以不会出现遮挡的问题。
接下来设置图片的动画效果这里设置的动画效果是

@keyframes show{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes disappear{
	from{opacity:1;}
	to{opacity:0;}
}

展示的动画是透明度从0到1，隐藏的动画是透明度从1到0，动画事件是0.7s 动画速度是线性。

ul的设置

将该元素绝对定位在轮播盒的底部居中

li的设置

如css代码，有active类的li背景色变成orange

js代码实现

//根据id取得轮播盒
window.onload=function(){
    var ads = document.getElementById("images");
    var images=ads.getElementsByTagName("img");
    var list = ads.getElementsByTagName("li");
    var cur=0;
    var len=list.length;
    var timer;
    timer=setInterval(autoPlay,4000);
	//鼠标覆盖取消定时器即停止轮播
    ads.onmouseover=function(){
        clearInterval(timer);
    }
    //鼠标离开重新设置定时器
    ads.onmouseout=function(){
        timer=setInterval(autoPlay,4000);
    }
    //循环给每一个li标签添加onclick事件
    for(var i = 0;i<len;i++)
        {
            (function(j){
                list[j].onclick=function(){
                    changePic(j);
                    cur=j;
                }
               
            })(i);
        }
        //自动播放即根据cur来改变img还有一个重要作用是当轮播到最后一张图片的时候将cur设置为第一张照片下标
    function autoPlay(){
        cur++;
        if(cur>=len){
            cur=0;
        }
        changePic(cur);
    }
    //根据传入的cur值来修改样式即添加和删除元素的class
    function changePic(cur){
        for(var i = 0; i<len;i++)
        {
        	//给每一个img添加unshow样式
            images[i].className="unshow";
            取消li标签上的class样式
            list[i].className="";
        }
        给被选中的img和li添加class样式
        images[cur].className="show";
        list[cur].className="active";
    }
}

大功告成！！1