js实现简单轮播图下【2021.10.18】

最新推荐文章于 2024-07-13 11:50:40 发布

轻盈的风

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量61

点赞数

分类专栏： javascript_笔记专栏文章标签： css html html5 js

本文链接：https://blog.csdn.net/masierty/article/details/120836790

版权

javascript_笔记专栏专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、前言

本章是对前一章功能的完善，添加了一个实时进度条，不过代码我写复杂了，博主还是个小白，只能大家参考一二。

二、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            list-style: none;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .leftBut {
            transform: rotate(180deg);
            position: absolute;
            left: 5px;
            top: 48%;
            z-index: 2;
            width: 48px;
        }

        .rightBut {
            position: absolute;
            right: 5px;
            top: 48%;
            z-index: 2;
            width: 48px;
        }

        .maxDiv {
            width: 80%;
            height: 65%;
            border: 1px black solid;
            position: relative;
            overflow: hidden;
        }

        #imagesBox {
            display: flex;
            position: relative;
            left: 0;
            transition: 0.5s ease;
        }

        /* 为进度条设置style */
        #imgSpeedOl {
            z-index: 3;
            position: absolute;
            top: 95%;
            left: 45%;
        }

        .imgSpeedLi {
            float: left;
            margin: 10px;
            width: 15px;
            height: 5px;
            border: 1px black solid;
            background-color: rgb(255, 255, 255);
            transition: 0.5s ease all;
        }

        #clicked {
            background-color: rgb(37, 182, 240);
        }
    </style>
</head>

<body>
    <div class="maxDiv">
        <ul id="imagesBox">
            <li><img src="../images/轮播图1.jpg" /></li>
            <li><img src="../images/轮播图2.jpg" /></li>
            <li><img src="../images/轮播图3.jpg" /></li>
        </ul>
        <ol id="imgSpeedOl">
            <li class="imgSpeedLi" id=""></li>
            <li class="imgSpeedLi" id=""></li>
            <li class="imgSpeedLi" id=""></li>
        </ol>
        <a href="#"><img class="leftBut" src="../images/白向右.png"></a>
        <a href="#"><img class="rightBut" src="../images/白向右.png"></a>
    </div>
</body>
<script>
    //获取元素和初始化index以及初始化节流锁
    let maxDiv = document.getElementsByClassName("maxDiv")[0];
    let imagesBox = document.getElementById("imagesBox");
    let images = imagesBox.children;
    let leftBut = document.getElementsByClassName("leftBut")[0];
    let rightBut = document.getElementsByClassName("rightBut")[0];
    let imgWidth = maxDiv.offsetWidth;
    let index = 0;
    let lock = true;
    //修改图片大小
    function funLunBo() {
        for (var i = 0; i < images.length; i++) {
            images[i].style.width = imgWidth + "px";
        }
    }
    funLunBo();

    //自动播放,每1.8s动一次
    let timer;//第一个参数不能加括号哦!
    //封装一个每隔1.8秒自动滚动事件
    function funClickBut() {
        timer = setInterval(function funTimer() {
            index++;
            imagesBox.style.left = -index * imgWidth + "px";
            if (index > 2) {
                setTimeout(() => {//先过渡0.5s的克隆图，然后用延时器立马到第一张
                    imagesBox.style.transition = "none";
                    index = 0;
                    imagesBox.style.left = -index * imgWidth + "px";
                }, 500);
            }
            imagesBox.style.transition = "0.5s ease";
        }, 1800)
    }
    funClickBut();
    //封装一个每隔1.8秒绑定进度条事件
    function enRemovSpeed(){
    let removSpeed = setInterval(funRemovSpeed, 1800);
}
enRemovSpeed();

//进度条绑定indexvalve
let olList = document.getElementById("imgSpeedOl");
    let imgSpeedLi = document.getElementsByClassName("imgSpeedLi");
    for(var i =0;i<3;i++){
            //去掉所有的进度条样式
    olList.children[i].id= "";
        }
        function funRemovSpeed() {
        for(var i =0;i<3;i++){
            //去掉所有的进度条样式
    olList.children[i].id= "";
        }
        //如果index等于三，也就是最后一张复制体
        if (index == 3) {
            olList.children[0].id = "clicked";

        } else {
            olList.children[index].id = "clicked";
        }
       
    }

    //右按钮点击事件
    let clonImg = images[0].cloneNode(true);//克隆第一张图片
    imagesBox.appendChild(clonImg);
    rightBut.onclick = function () {
        if (!lock) return;//判断节流锁打开状态
        clearInterval(timer);//清除自动滚动
        //clearInterval(removSpeed);//清除绑定的进度条,冲突了，回头研究一下
        index++;
        funRemovSpeed();//运行一次绑定滚动条
        imagesBox.style.left = -index * imgWidth + "px";
        if (index > 2) {
            setTimeout(() => {//先过渡0.5s的克隆图，然后用延时器立马到第一张
                imagesBox.style.transition = "none";
                index = 0;
                imagesBox.style.left = -index * imgWidth + "px";
            }, 500);
        }
        imagesBox.style.transition = "0.5s ease";
        lock = false;//运行完一次点击后关锁

        //500毫秒之后开锁
        setTimeout(() => {
            lock = true;
            funClickBut();
            enRemovSpeed();
        }, 500);
    }//点太快了会有卡顿，等下加节流锁

    //动态添加li
    //     let olList = document.getElementById("imgSpeedOl");
    //     for(var i=0;i<3;i++){
    //     var imgSpeedLi = document.createElement("li");
    //     imgSpeedLi.className="imgSpeedLi select";
    //     olList.appendChild(imgSpeedLi);
    // }


    //左按钮点击事件
    leftBut.onclick = function () {
        if (!lock) return;
        clearInterval(timer);
        if (index == 0) {
            imagesBox.style.transition = "none";
            index = 3;//变到最后一张，也就是复制的第一张,也等于length-1
            imagesBox.style.left = -index * imgWidth + "px";
            setTimeout(() => {
                imagesBox.style.transition = "0.5s ease";
                index = 2;
                imagesBox.style.left = -index * imgWidth + "px";
            }, 0);
        } else {
            index--;
            imagesBox.style.left = -index * imgWidth + "px";
        }
        funRemovSpeed();//运行一次绑定滚动条
        lock = false;
        setTimeout(() => {
            lock = true;
            funClickBut();
            enRemovSpeed();
        }, 500);
    }

    
    




</script>

</html>

图片的化上一章有，就不重复放了，祝大家身体健康。

轻盈的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现简单轮播图下【2021.10.18】

一、前言本章是对前一章功能的完善，添加了一个实时进度条，不过代码我写复杂了，博主还是个小白，只能大家参考一二。二、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...
复制链接

扫一扫