用javaScript实现轮播图效果 包括自动变换，按钮控制，上一张下一张切换

大家好，欢迎来到IT知识分享网。

1.HTML代码

<div id="wrap">
    <img src="images/1.jpg" alt="" class="on">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <div class="btn">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <i class="left" id="prev"></i>
    <i class="right" id="next"></i>
</div>

2.css代码

#wrap{
    position: relative;
    width:590px;
    height: 470px;
}
#wrap img{
    position: absolute;
    top: 0;
    left: 0;
    /*display: none;*/
    opacity: 0;
    
}
#wrap .on{
    /*display: block;*/
    transition: 2s;
    opacity: 1;
}
.btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -44px;
}
.btn span{
    float: left;
    width: 8px;
    height: 8px;
    border:2px solid rgba(255,255,255,0.4);
    border-radius: 5px;
    margin-right: 10px;
}
.btn .active{
    background: white;
    cursor: pointer;
}
.left,.right{
    display: block;
    width: 37px;
    height: 53px;
    position: absolute;
    top: 50%;
    margin-top: -27px;
    cursor: pointer;
}
.left{
    background: url("images/arrow.png") left top;
}
.right{
    background: url("images/arrow.png") left -53px;
    right: 0;
}

3.js代码

window.onload = function () {
    var oWrap = document.getElementById('wrap');
    var aImg = oWrap.getElementsByTagName('img');
    var aBtn = oWrap.getElementsByTagName('span');
    var oPrev = document.getElementById('prev');
    var oNext = document.getElementById('next');
    var iNow =0;

    function tab(){
        for (var i =0;i<aBtn.length;i++){//清空所有按钮选中样式以及图片显示样式
            aBtn[i].className='';
            aImg[i].className='';
        }
        aBtn[iNow].className='active';//设置当前按钮选中样式以及当前图片透明度
        aImg[iNow].className='on';
    }

    setInterval( function () {//每两秒循环变换下一张图片
            iNow++;
            if (iNow==aBtn.length)iNow=0;
           tab();
    },2000);

    for (var i =0;i<aBtn.length;i++){
        aBtn[i].index=i;//为按钮添加自定义属性（索引）目的是使图片和按钮相对应
        //按钮
        aBtn[i].οnmοuseοver= function () {
            iNow=this.index; //是按钮所控制显示的图片与左右箭头控制显示的图片相对应
            tab();
        }
        //下一个箭头
        oNext.onclick = function () {
            iNow++;
            if (iNow==aImg.length)iNow=0;
            tab();
        }
        //上一个箭头
        oPrev.onclick = function () {
            iNow--;
            if (iNow==-1)iNow=aImg.length-1;
            tab();
        }

    }

}

静态效果图：（不会截动态的）