11-28 08:47 阅读 286

JavaScript通过DOM节点操作、样式操作、文本内容操作等实现图片轮播效果

实现效果

图片自动滚动
当鼠标移动到图片上悬浮时，自动滚动效果取消；鼠标移出图片时，自动滚动效果继续
图片可以通过左右箭头手动左右切换
可以点击图片下方的圆点切换图片
图片切换时，圆点也会对应地切换
当离开本页面时，轮播效果取消；返回页面时，轮播效果继续（防止从别的页面切回本页面时积累多个计时器，图片疯狂翻页）

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Dom操作实现lunbo</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="lunbo.css">
        <script type="text/javascript" src="lunbo.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="photos">
                <img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner3.jpg">
                <img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner1.jpg">
                <img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner2.jpg">
                <img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner3.jpg">
                <img src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner1.jpg">
            </div>
            <div id="indicator">
                <span index = "1" class="on"> 1 </span>
                <span index = "2"> 2 </span>
                <span index = "3"> 3 </span>
            </div>
            <span class="prev arrow"><</span>
            <span class="next arrow">></span>
        </div>
    </body>
</html>复制代码

CSS：

*{
   margin: 0;
   padding: 0;
}

#container{
   position: relative;
   width: 700px;
   height: 400px;
   margin: 60px auto;
   overflow: hidden;
}

#photos{
   position: absolute;
   width: 3500px;
}

#photos img{
   width: 700px;
   height: 400px;
   float: left;
   z-index: 1;
}

#indicator{
   width: 90px;
   height: 20px;
   position: absolute;
   bottom:10px;
   left: 50%;
   margin-left: -45px;
   z-index: 2;
}

#indicator span{
   text-align: center;
   color: black;
   float: left;
   cursor: pointer;
   width: 20px;
   height: 20px;
   border-radius: 100%;
   background-color: transparent;
   margin-right: 10px; 
}

#container #indicator span.on{
    background-color: white;
}

.prev{
   position: absolute;
   left: 0;
}
.next{
   position: absolute;
   right: 0;
}

.arrow{
   width: 30px;
   height: 90px;
   top: 50%;
   margin-top: -45px;
   background-color: rgba(0,0,0,0.3);
   opacity: 0.7;
   color: white;
   font-size: 30px;
   text-align: center;
   line-height: 90px;
   cursor: pointer;
   z-index: 2;
}

.arrow:hover{
   background-color: rgba(0,0,0,0.7);
}复制代码

Javascript：

window.onload = function () {
    var container = document.getElementById("container");
    var photos = document.getElementById("photos");
    var indicator = document.getElementById("indicator").getElementsByTagName("span");
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var index = 1;
    var timer;
    photos.style.left = -700 + 'px';   //初始化图片展示位置

    function pictureMove(offset) {
        var newLeft = parseInt(photos.style.left) + offset;
        var speed = offset < 0 ? -20 : 20;
        function move() {
            if ((speed < 0 && parseInt(photos.style.left) > newLeft)
                || (speed > 0 && parseInt(photos.style.left) < newLeft)) {
                photos.style.left = parseInt(photos.style.left) + speed + "px";
                setTimeout(move, 10);
            }
            else {
                if (newLeft === 0) {
                    photos.style.left = -2100 + "px";
                }
                if (newLeft === -2800) {
                    photos.style.left = -700 + "px";
                }
            }
        }
        move();
    }

    function showButtons() {
        //去除上次的按钮样式
        for (var i = 0; i < indicator.length; i++) {
            if (indicator[i].className === "on") {
                indicator[i].className = "";
                break;
            }
        }
        //设置新的按钮样式
        indicator[index - 1].className = "on";
    }

    //点击下一张图片
    next.onclick = function () {
        if (index === 3) {
            index = 1;
        } else {
            index += 1;
        }
        showButtons();
        clearInterval(timer)    //避免与自动播放冲突
        pictureMove(-700);
    };

    //点击上一张图片
    prev.onclick = function () {
        if (index === 1) {
            index = 3;
        } else {
            index -= 1;
        }
        showButtons();
        clearInterval(timer)    //避免与自动播放冲突
        pictureMove(700);
    };

    for (var i = 0; i < indicator.length; i++) {
        indicator[i].onclick = function () {
            if (this.className === "on") {
                return;
            }
            var btnIndex = parseInt(this.getAttribute("index"));
            var offset = -700 * (btnIndex - index);
            index = btnIndex;
            showButtons();
            clearInterval(timer)    //避免与自动播放冲突
            pictureMove(offset);
        }
    }

    function play() {
        timer = setInterval(function () {
            next.onclick();
        }, 5000);
    }

    function stop() {
        clearInterval(timer);
    }

    container.onmouseover = stop;
    container.onmouseout = play;

    // 进入页面监听
    window.addEventListener('focus', function () {
        play()
    }, false)

    // 离开页面监听
    window.addEventListener('blur', function () {
        stop()
    }, false)

    play();
}

作者：MMMMMMaxuan
链接：https://juejin.cn/post/7035280367418359838

伪原创工具 SEO网站优化 https://www.237it.com/