原生js实现轮播图-蒲公英云

原生js实现轮播图

原生js简单轮播图

实现原理：

一系列大小相等的图片平铺，利用css布局，只显示其中一张图片，其它图片隐藏。通过偏移量来实现滑动，或者手动点击来实现滑动。

![Image 1][]

Html布局

<body>
<div id="container">
    <div id="list" style="left: 0px">
       <!-- <img src="./img/pic_05.png" alt="1" />-->
        <img src="./img/pic_01.png" alt="1" />
        <img src="./img/pic_02.png" alt="2" />
        <img src="./img/pic_03.png" alt="3" />
        <img src="./img/pic_04.png" alt="4" />
        <img src="./img/pic_05.png" alt="5" />
        <!--<img src="./img/pic_01.png" alt="5" />-->
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>

父容器container存放所有内容，list子容器存放图片，buttons子容器存放按钮小圆点。下面的表示轮播的两个箭头。

进行优化，实现无缝轮播

当从最后一张图滚动到第一张图时，中间有很大的空白。

CSS部分

注意list部分，overfloat : hidden ; 显示一张图片，其它图片隐藏。

<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    body {
        padding: 20px;
    }
    #container {
        position: relative;
        width: 600px;
        height: 400px;
        border: 3px solid #333;
        margin: 50px auto;
        overflow: hidden;
    }
    #list {
        position: absolute;
        z-index: 1;
        width: 4200px;
        height: 400px;
    }
    #list img {
        float: left;
        width: 600px;
        height: 400px;
    }
    #buttons {
        position: absolute;
        left: 250px;
        bottom: 20px;
        z-index: 2;
        height: 10px;
        width: 100px;
    }
    #buttons span {
        float: left;
        margin-right: 5px;
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-radius: 50%;
        background: #333;
        cursor: pointer;
    }
    #buttons .on {
        background: orangered;
    }
    .arrow {
        position: absolute;
        top: 180px;
        z-index: 2;
        display: none;
        width: 40px;
        height: 40px;
        font-size: 36px;
        font-weight: bold;
        line-height: 39px;
        text-align: center;
        color: #fff;
        background-color: RGBA(0, 0, 0, .3);
        cursor: pointer;
    }
    .arrow:hover {
        background-color: RGBA(0, 0, 0, .7);
    }
    #container:hover .arrow {
        display: block;
    }
    #prev {
        left: 20px;
    }
    #next {
        right: 20px;
    }
</style>

如下图所示：

![Image 1][]

JS部分

首先实现手动点击左右箭头，实现图片的偏移；

function animate(offset) {
    console.log(list.style.left);
    //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值， //且style.left获取的是字符串，需要用parseInt()取整转化为数字。 var newLeft = parseInt(list.style.left) + offset;
    list.style.left = newLeft + 'px';
    if(newLeft<-2400){
        list.style.left = 0 + 'px';
    }
    if(newLeft>0){
        list.style.left = -2400 + 'px';
    }
}

但是现在问题来了，当点击图片到最后一张时候，无法跳到第一张。原因是我们用left偏移量来控制图片，在点击箭头时偏移量在发生变化，为了在最后一张图片点击时能跳到第一张图片，我们需要对偏移量做一个判断；

在animate函数里加上一个关于偏移量的判断；

prev.onclick = function() {
    animate(600);
}
next.onclick = function() {
    animate(-600);
}

加上该判断后运行下，能跳转到第一页，没问题。

自动轮播，顾名思义就是自己能切换图片，则此时需要给他添加一个定时器

这里我们是用setInterval()，因为我们的图片需要循环滚动

var timer;
function play(){
    timer = setInterval(function () {
        prev.onclick()
    }, 1500)
}
play();

当把鼠标移到图片上面时，停止自动切换，鼠标移开时继续自动切换

function stop(){
    clearInterval(timer);
}
//为什么不用stop(); container.onmouseover = stop;
container.onmouseout = play;

（有必要强调一下对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。简单来说，setInterval()执行多次，setTimeout()只执行一次。）

小圆点部分

var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var index = 1;
    function buttonsShow() {
        //这里需要清除之前的样式 for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == 'on') {
                buttons[i].className = '';
            }
        }
        //数组从0开始，故index需要-1 buttons[index - 1].className = 'on';
    }
    prev.onclick = function() {
        index -= 1;
        if (index < 1) {
            index = 5;
        }
        buttonsShow();
        animate(600);
    }
    next.onclick = function() {
        //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断 index += 1;
        if (index > 5) {
            index = 1;
        }
        buttonsShow();
        animate(-600);
    }
}