原生js实现轮播图

来源：互联网发布：js 通过class获取元素编辑：程序博客网时间：2024/05/21 19:50

原生js简单轮播图

实现原理：

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

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>

如下图所示：

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);    }}

好了~把上述代码拼在一起，就能组成一个简单的轮播咯。

阅读全文

1 0