原生js实现轮播图

来碗麻酱乌冬面

已于 2023-06-02 10:32:33 修改

阅读量553

点赞数 2

于 2023-06-02 10:30:28 首次发布

本文链接：https://blog.csdn.net/qq_42032095/article/details/131001812

版权

一、效果展示

二、具体步骤实现

1、设计结构和样式

2、定时器实现简单轮播效果

3、做出上一张、下一张的按钮

4、实现上一张、下一张的代码

5、做出轮播图上的四个小圆点

6、小圆点跟着图片滚动变红

7、点击小圆点切图，完成最终效果

8、完整代码

<style>
    * {
        margin: 0;
        padding: 0;
        /* 文字装饰 */
        text-decoration: none;
        /* li的样式 */
        list-style: none;
    }

    #banner {
        width: 800px;
        height: 400px;
        border: 2px solid black;
        overflow: hidden;
        position: relative;
    }

    #imglist {
        width: 4000px;
        height: 400px;
    }

    #imglist img {
        width: 800px;
        height: 400px;
    }

    #imglist li {
        float: left;
    }

    .prev {
        background: #666;
        width: 30px;
        height: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        position: absolute;
        left: 5px;
        top: 45%;
        /* 鼠标移过去改成手指效果 */
        cursor: pointer;
    }

    .next {
        background: #666;
        width: 30px;
        height: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        position: absolute;
        right: 5px;
        top: 45%;
        cursor: pointer;
    }

    #icolist {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }

    /* 设置圆点的样式 */
    #icolist li {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #666;
        text-align: center;
        line-height: 30px;
        color: #fff;
        float: left;
        margin-left: 5px;
        cursor: pointer;
    }
</style>

<body>
    <div id="banner">
        <ul id="imglist">
            <li><img src="./img/1.jpeg" /></li>
            <li><img src="./img/2.jpeg" /></li>
            <li><img src="./img/3.jpeg" /></li>
            <li><img src="./img/4.jpeg" /></li>
            <li><img src="./img/1.jpeg" /></li>
        </ul>
        <ul id="icolist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="prev"> 《 </div>
        <div class="next"> 》 </div>
    </div>
</body>

    var eprev = document.querySelector('.prev');//向前按钮
    var enext = document.querySelector('.next');//向后按钮
    var esico = document.getElementById('icolist').getElementsByTagName('li');//获取小圆点元素
    var eicolist = document.querySelector('#icolist');//获取圆点列表元素
    var eimglist = document.querySelector('#imglist');//获取图片列表元素
    var left = 0;//移动变量
    var timer;//定时器

    run();
    //做滚动函数run，通过样式marginleft进行移动，由于父元素设置为了BFC，因此，子元素的margin是相对于父元素的。
    //每10ms运行一次run, 每次偏移left累积-10
    //如果滚动完，重新开始，设置left的值
    //最后一张图播完后出现空白，需要补上第一张图接上
    function run() {
        if (left <= -3200) {
            left = 0;
        }
        imglist.style.marginLeft = left + 'px';
        //添加变量n，滚完一张图停1200毫秒
        var n = (left % 800 == 0) ? n = 1200 : n = 10;
        left -= 10;
        timer = setTimeout(run, n);

        //创建变量m获取当前图片序号
        var m = Math.floor(-left / 800);
        //在run函数调用icochange进行小圆点变化
        icochange(m);
    }

    //做一个图片定位函数，根据参数n为定位到第n张图
    function imgchange(n) {
        let lt = n * (-800);
        imglist.style.marginLeft = lt + 'px';
        left = lt;
    }

    //测试两个按钮的单击事件效果
    eprev.onclick = function () {
        //测试定位到第一张
        //imgchange(0);
        //获取当前的位置，减去1就是上一张
        let prego = Math.floor(-left / 800) - 1;
        //由于第一张减去1的图片不存在
        if (prego == -1) {
            prego = 3;
        }
        imgchange(prego);
    }
    enext.onclick = function () {
        let nextgo = Math.floor(-left / 800) + 1;
        if (nextgo == 4) {
            nextgo = 0;
        }
        imgchange(nextgo);
    }


    //创建一个圆点跟随变化函数icochange,m为当前图片的索引
    function icochange(m) {
        //通过for循环，所有li元素背景色清空
        for (let index = 0; index < esico.length; index++) {
            esico[index].style.backgroundColor = '';
        }
        //当前图片所在小圆点设置背景色为红色
        if (m < esico.length) {
            esico[m].style.backgroundColor = 'red';
        }
    }

    //注意：如果用户点击的是小圆点中两个li之间的ul位置，tg.innerHTML - 1返回的是NaN，需要进行判断
    //创建列表元素点击事件
    eicolist.onclick = function () {
        //获取事件目标元素
        var tg = event.target;
        //通过ico获取点击的序号
        let ico = tg.innerHTML - 1;

        if (ico !== NaN) {
            //点击之后切换图片，切换小圆点
            imgchange(ico);
            icochange(ico);
        }
    }

    //鼠标在图片列表上时轮播停止，移开后又启动
    eimglist.onmouseover = function(){
        clearTimeout(timer);
    }
    eimglist.onmouseout = function(){
        run();
    }