轮播图案例（还有一个bug，点击侧边按钮，侧边按钮会消失）

最新推荐文章于 2022-04-17 11:16:33 发布

「已注销」

最新推荐文章于 2022-04-17 11:16:33 发布

阅读量582

点赞数

本文链接：https://blog.csdn.net/qq_41588302/article/details/108460484

版权

在这里插入图片描述
功能

点击侧边栏进行切换图片
点击下方圆圈切换图片
图片自动轮播
鼠标移入，侧边栏出现;鼠标移出，侧边栏消失

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="img.js"></script>
   <style>
       * {
           margin: 0;
           padding: 0;
       }

       .box {
           height: 300px;
           width: 300px;
           margin: 100px auto;
           /* background-color: green; */
           overflow: hidden;
           position: relative;
       }

       .box .imgp {
           position: absolute;
           width: 300px;
           height: 300px;
           left: 0;
           top: 0;
           background-color: green;
       }

       .imgp ul li img {
           width: 300px;
           height: 300px;
       }

       .box .imgp ul {
           position: absolute;
           width: 2000px;
           left: 0;
           top: 0;
           /* transition: left .5s linear, right, .5s linear; */

       }

       .box .imgp ul li {
           list-style: none;
           float: left;
       }

       .box .left,
       .right {
           font-size: 40px;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background-color: gray;
           opacity: 0.5;
           display: none;
           cursor: pointer;
           z-index: 999;
       }

       .box .left {
           /* top: 0; */
           left: 0;
       }

       .box .right {
           /* top: 0; */
           right: 0;

       }

       .box .dot {
           position: absolute;
           height: 15px;
           /* width: 100px; */
           bottom: 17px;
           left: 97px;
           /* background-color: green; */

       }

       .box .dot li {
           float: left;
           width: 15px;
           height: 15px;
           border-radius: 7px;
           background-color: white;
           opacity: .5;
           list-style: none;
           margin-left: 10px;
       }

       .box .dot .current {
           opacity: 1;
       }
   </style>
</head>

<body>
   <div class="box">
       <div class="imgp">
           <ul>
               <li>
                   <img src="zxc1.jpg" alt="">
               </li>
               <li>
                   <img src="zxc2.jpg" alt="">
               </li>

               <li>
                   <img src="zxc3.jpg" alt="">

               </li>
               <li>
                   <img src="zxc4.jpg" alt="">
               </li>
               <!-- <li>
                   <img src="zxc1.jpg" alt="">
               </li> -->
           </ul>
       </div>
       <div class="left">&lt;</div>
       <div class="right">&gt;</div>

       <ul class="dot">
       </ul>
   </div>
</body>

</html>

window.addEventListener('load', function () {
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var ul = document.querySelector('.imgp').querySelector('ul');
    console.log(ul.children.length);
    // var i = 0;
    var box = document.querySelector('.box');
    var dotul = document.querySelector('.dot');
    (function () {
        for (var i = 0; i < ul.children.length; i++) {
            var dot = document.createElement('li');
            dot.index = i;
            // console.log(i);
            dotul.appendChild(dot);
        }
    }());
    // dotul.children[0].style.backgroundColor = 'black';
    // 为什么不起作用了？类里面的样式被划掉 样式权重
    dotul.children[0].className = 'current';
    console.log(dotul.children[0]);
    // 只会穿过被选定元素才回触发
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            right.click();
        }, 2000);
    });
    ul.appendChild(ul.children[0].cloneNode(true));

    var num = 0;
    var circle = 0;
    right.addEventListener('click', function () {
        if (num == ul.children.length - 1) {
            num = 0;
            ul.style.left = 0 + 'px';
        }
        num++;
        animate(ul, -num * 300);
        circle++;
        cirMove(circle);
    });
    for (var i = 0; i < dotul.children.length; i++) {

        dotul.children[i].addEventListener('click', function () {
            for (var i = 0; i < dotul.children.length; i++) {
                dotul.children[i].className = '';
            }
            this.className = 'current';
            num = this.index;
            circle = this.index;
            // console.log(ul.style.left);
            animate(ul, -this.index * 300);
        });
    }
    left.addEventListener('click', function () {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * 300 + 'px';
        }
        num--;
        animate(ul, -num * 300);
        circle--;
        cirMove(circle);
    });
    for (var i = 0; i < dotul.children.length; i++) {

        dotul.children[i].addEventListener('click', function () {
            for (var i = 0; i < dotul.children.length; i++) {
                dotul.children[i].className = '';
            }
            this.className = 'current';
            num = this.index;
            circle = this.index;
            // console.log(ul.style.left);
            animate(ul, -this.index * 300);
        });
    }
    function cirMove(c) {
        for (var i = 0; i < dotul.children.length; i++) {
            dotul.children[i].className = '';
        }
        if (circle < 0) {
            circle = dotul.children.length - 1;
        }
        if (circle == dotul.children.length) {
            circle = 0;
        }
        dotul.children[circle].className = 'current';
    }
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            }
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil((step) / 10) : Math.floor((step) / 10);
            obj.style.left = obj.offsetLeft + step + 'px';
            callback && callback();
            // }
        }, 5);
    }
    var timer = setInterval(function () {
        right.click();
    }, 2000);
});

知识点

createElement(’’)，appendChild()
mouseenter,mouseleave没有冒泡，即只会触发指定元素的点击事件，而不会触发父元素的点击事件
xx.children(),得到某元素的孩子元素结点，不包括文本
addEventListener(事件类型，回调函数)
setInterval(回调函数,间隔时间);
重复代码多的时候，将其封装成函数

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图案例（还有一个bug，点击侧边按钮，侧边按钮会消失）

功能点击侧边栏进行切换图片点击下方圆圈切换图片图片自动轮播鼠标移入，侧边栏出现;鼠标移出，侧边栏消失<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt.
复制链接

扫一扫