JS轮播图代码解析

最新推荐文章于 2023-09-17 14:12:21 发布

程序员之始路

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量1.3k

点赞数

分类专栏： javascript API 文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_55757789/article/details/121217727

版权

javascript API 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html轮播图代码解析

<body>
    <div class="box">
        <a href="javascript:;" class="btn-l"></a>
        <a href="javascript:;" class="btn-r"></a>
        <ul>
            <li>
                <a href="#">
                    <img src="./images/4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.jpg" alt="">
                </a>
            </li>
        </ul>
        <ol class="circle">
        </ol>
    </div>

</body>

CSS 轮播图代码解析

 * {
            margin: 0;
            padding: 0;
        }
        
        .current {
            background-color: red;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        .box {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .box ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 3000px;
            height: 400px;
        }
        
        .box ul li {
            float: left;
        }
        
        .box ul img {
            width: 500px;
            height: 400px;
        }
        
        .btn-l {
            display: none;
            position: absolute;
            top: 195px;
            left: 7px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: #ccc;
            width: 20px;
            height: 20px;
            z-index: 5;
        }
        
        .box .btn-r {
            display: none;
            background-color: #ccc;
            width: 20px;
            height: 20px;
            position: absolute;
            right: -5px;
            top: 195px;
            z-index: 5;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        
        .box ol {
            position: absolute;
            left: 225px;
            bottom: 10px;
            /* width: 50px; */
            height: 15px;
            line-height: 15px;
            display: flex;
            border-radius: 7px;
            /* background-color: yellow; */
        }
        
        .box ol li {
            width: 10px;
            height: 10px;
            margin: 2px 2px;
            border-radius: 10px;
            /* background-color: #fff; */
            border: 2px solid #fff;
        }
    </style>

javascript轮播图代码解析

window.addEventListener('load', function() {


    var box = document.querySelector('.box');
    var btn_l = document.querySelector('.btn-l')
    var btn_r = document.querySelector('.btn-r')
    var boxWidth = box.offsetWidth;
    var ul = box.querySelector('ul')
    var ol = document.querySelector('ol')
        // 当鼠标经过轮播图模块， 左右按钮显示， 离开消失
    box.addEventListener('mouseenter', function() {
        btn_l.style.display = 'block';
        btn_r.style.display = 'block';
        clearInterval(timer)
        timer = null;
    })
    box.addEventListener('mouseleave', function() {
            btn_l.style.display = 'none';
            btn_r.style.display = 'none';
            timer = setInterval(function() {
                btn_r.click();
            }, 2000)
        })
        //动态生成小圆圈 ol里面的li,有几张图片就生成几个li

    for (i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        ol.appendChild(li);
        li.setAttribute('index', i)
            // 3.把ol里面的小圆圈第一个添加类current
        ol.children[0].className = 'current';
        //4.利用排他思想 把其他的小圆圈样式清除  只留当前个
        li.addEventListener('click', function() {
            for (i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';

            var index = this.getAttribute('index');
            //当点击了某个小li 就要把这个li的索引号给num
            num = index;
            //当点击了某个小li 就要把这个li的索引号给circle
            circle = num;
            // animate(obj, target, function)
            animate(ul, -index * boxWidth)
        })

    }
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // num是小按钮的索引号
    var num = 0;
    // circle 是控制小圆圈的的播放
    var circle = 0;

    // 图片滚动的无缝连接
    btn_r.addEventListener('click', function() {
            // 如果走到最后一张，此时ul快速复原到left0
            if (num == ul.children.length - 1) {
                num = 0;
                ul.style.left = 0;
            }
            num++;
            animate(ul, -num * boxWidth)
                //点击右侧按钮，小圆圈跟着一起变化 可以声明一个变量，小圆圈跟着一起变
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            //调用函数
            circleChange();

        })
        // 左侧按钮做法
    btn_l.addEventListener('click', function() {
            // 如果走到最后一张，此时ul快速复原到left0
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -(ul.children.length - 1) * boxWidth + 'px';
            }
            num--;
            animate(ul, -num * boxWidth)
                // 点击右侧按钮，小圆圈跟着一起变化 可以声明一个变量，小圆圈跟着一起变
            circle--;
            circle = circle < 0 ? circle = 3 : circle;
            circleChange();

        })
        // 因为左面和右面都有同样的代码 封装了一个函数来优化
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }

        ol.children[circle].className = 'current';
    }
    // .自动播放模块，添加定时器
    var timer = this.setInterval(function() {
        btn_r.click();
    }, 2000)
})

程序员之始路

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS轮播图代码解析

html轮播图代码解析<body> <div class="box"> <a href="javascript:;" class="btn-l"></a> <a href="javascript:;" class="btn-r"></a> <ul> <li> <a href="#">
复制链接

扫一扫