纯原生JS大图轮播

CSS部分：

 

CSS：
<style type="text/css">
#banner {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
overflow: hidden;
}

#banner_move {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 5000px;
background-color: #eee;
}

#banner_move img {
width: 500px;
height: 300px;
float: left;
}

#banner_btnleft {
position: absolute;
left: 0px;
top: 50%;
margin-top: -40px;
width: 50px;
height: 80px;
background-color: rgba(0,0,0,0.4);
z-index: 99999;
text-align: center;
line-height: 80px;
font-size: 40px;
font-weight: bold;
color: #fff;
cursor: pointer;
display: none;
}

#banner_btnright {
position: absolute;
right: 0px;
top: 50%;
margin-top: -40px;
width: 50px;
height: 80px;
background-color: rgba(0,0,0,0.4);
z-index: 99999;
text-align: center;
line-height: 80px;
font-size: 40px;
font-weight: bold;
color: #fff;
cursor: pointer;
display: none;
}

#banner_btns {
position: absolute;
bottom: 10px;
height: 21px;
background-color: rgba(0,0,0,0.7);
border-radius: 15px;
}

.banner_btns_item {
width: 13px;
height: 13px;
background-color: #fff;
border-radius: 20px;
float: left;
margin: 4px;
}
</style>

 

HTML部分：

<div id="banner">
     <div id="banner_btnleft" onselectstart="return false"><</div>
     <div id="banner_btnright" onselectstart="return false">></div>
          <div id="banner_move">    //这里可以插入任意几张图片
              <img src="imgs/1.jpg" />
              <img src="imgs/2.jpg" />
              <img src="imgs/3.jpg" />
          </div>
          <div id="banner_btns">
          </div>
</div>

JS部分：

<script type="text/javascript">
    var timer1;
    var timer2;
    var bannerNow = 1;
    var bannerSpeed = 10;
    var oMove = document.getElementById('banner_move');
    var oLeft = document.getElementById("banner_btnleft");
    var oRight = document.getElementById("banner_btnright");
    var oBanner = document.getElementById('banner');
    var aa = document.getElementById('aaa');

    oLeft.onclick = function () {
        bannerNow -= 1;
        if (bannerNow < 1) bannerNow = oMove.getElementsByTagName("img").length;
        StartMove(bannerNow);
    }

    oRight.onclick = function () {
        bannerNow += 1;
        if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1;
        StartMove(bannerNow);
    }

    oBanner.onmouseover = function () {
        StopAutoMove();
        oLeft.style.display = 'block';
        oRight.style.display = 'block';
    }

    oBanner.onmouseout = function () {
        AutoMove();
        oLeft.style.display = '';
        oRight.style.display = '';
    }

    AutoMove();

    for (var i = 0; i < oBanner.getElementsByTagName('img').length; i++) {
        if (i == 0) document.getElementById("banner_btns").innerHTML += '<div style="background-color:red;" class="banner_btns_item"></div>';
        else document.getElementById("banner_btns").innerHTML += '<div class="banner_btns_item"></div>';
    }
    document.getElementById("banner_btns").style.left = "50%";
    document.getElementById("banner_btns").style.marginLeft = '-' + (document.getElementById("banner_btns").offsetWidth / 2) + 'px';

    var oBbtns = document.getElementsByClassName('banner_btns_item');
    for (var i = 0; i < oBbtns.length; i++) {
        oBbtns[i].index = i + 1;
        oBbtns[i].onclick = function () {
            bannerNow = this.index;
            StartMove(bannerNow);
        }
    }


    //轮播方法，参数为你要看的页数
    function StartMove(ind) {
        window.clearInterval(timer1); //不管有没有启动定时器，都清空一下，为了保证同时只存在一个定时工作
        timer1 = window.setInterval(function () {
            var finish = (ind - 1) * -500; //计算目标位置

            var btns = document.getElementsByClassName('banner_btns_item');
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            btns[ind - 1].style.backgroundColor = 'red';

            //计算速度，实现缓冲
            bannerSpeed = Math.ceil(Math.abs((Math.abs(finish) - Math.abs(oMove.offsetLeft)) / 10));

            //判断是否结束或是移动方向
            if (oMove.offsetLeft == finish) { //结束，停掉定时器
                window.clearInterval(timer1);
            }
            else { //未结束，继续移动
                if (oMove.offsetLeft > finish) //判断是否向右走
                    oMove.style.left = oMove.offsetLeft - bannerSpeed + 'px';
                else //判断是否向左走
                    oMove.style.left = oMove.offsetLeft + bannerSpeed + 'px';
            }
        }, 20);
    }

    //开启自动播放功能
    function AutoMove() {
        window.clearInterval(timer2);
        timer2 = window.setInterval(function () {
            bannerNow = bannerNow + 1;
            if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1;
            StartMove(bannerNow);
        }, 2000);
    }

    //停止自动播放功能
    function StopAutoMove() {
        window.clearInterval(timer2);
    }

</script>