js简易轮播图

WDrige
已于 2024-02-23 13:12:03 修改
阅读量158
点赞数
文章标签： javascript html5
于 2020-08-23 15:13:54 首次发布
本文链接：https://blog.csdn.net/qq_45693419/article/details/108183430
版权
原生js轮播图

代码：
<!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="./animate.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        a {
            text-decoration: none;
            color: white;
            font-size: 14px;
        }
        
        li {
            list-style: none;
        }
        
        .slider {
            width: 500px;
            height: 400px;
            margin: 20px auto;
            border: 1px solid #333333;
            position: relative;
            background-color: yellow;
            overflow: hidden;
        }
        
        .list {
            width: 9999px;
            position: absolute;
            left: 0;
        }
        
        .list li {
            float: left;
        }
        
        .list li img {
            width: 500px;
            height: 400px;
        }
        
        .next,
        .pre {
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            background-color: black;
            opacity: 0.7;
            /* 处理兼容性 */
            filter: opacity(70%);
            text-align: center;
            position: absolute;
            top: 50%;
            display: none;
        }
        
        .next {
            right: 0;
        }
        
        .pre {
            left: 0;
        }
        /* 为小圆圈设置样式 */
        
        .circle {
            width: 100px;
            position: absolute;
            left: 0;
            bottom: 20px;
        }
        
        .circle li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: red;
            cursor: pointer;
        }
        
        .circle .current {
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul class="list">
            <li>
                <a href="#"><img src="./img/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./img/4.jpg" alt=""></a>
            </li>
        </ul>
        <div class="next">
            <a href="#">下一页</a>
        </div>
        <div class="pre">
            <a href="#">上一页</a>
        </div>
        <ol class="circle">
        </ol>
    </div>
    <script>
        // 获取ul
        var ul = document.querySelector('.list');
        // 获取li
        var lis = document.querySelectorAll('.list>li');
        // 动态改变ul的宽度
        // ul.style.width = lis.length * 510 + 'px';
        var next = document.querySelector('.next');
        var pre = document.querySelector('.pre');
        var slider = document.querySelector('.slider');
        var circle = document.querySelector('.circle');
        var circleLi = document.querySelectorAll('.circle>li');
        // 动态的设置小圆圈的位置
        // 获取slider的宽度
        var sliderWidth = slider.offsetWidth;
        // 获取ol的宽度
        var olWidth = circle.offsetWidth;
        // console.log(olWidth);
        circle.style.left = (sliderWidth - olWidth) / 2 + 'px';
        // console.log(sliderWidth);

        var liWidth;
        // 获取ul中li的宽度
        for (let i = 0; i < lis.length; i++) {
            liWidth = lis[i].offsetWidth;
        }


        // 当鼠标移动到slider上显示和影藏按钮
        slider.onmouseover = function() {
            next.style.display = 'block';
            pre.style.display = 'block';
        };
        slider.onmouseout = function() {
            next.style.display = 'none';
            pre.style.display = 'none';
        };


        // 动态生成小圆圈的数量
        for (let i = 0; i < lis.length; i++) {
            // 创建li
            var li = document.createElement('li');
            // 将li追加到ol当中
            circle.appendChild(li);
        }


        //点击小圆点可以移动图片
        var index = 0; //图片索引
        var num; //圆圈索引
        var flag = true;
        var round = 0;
        for (let i = 0; i < circle.children.length; i++) {
            // 为小圆圈的li设置索引号
            circle.children[i].setAttribute('number', i);

            // 给每一个小圆圈绑定点击事件
            // console.log(circle.children.length);
            circle.children[i].addEventListener('click', function() {
                // 利用排他思想将其他兄弟元素的样式消除
                for (var i = 0; i < circle.children.length; i++) {
                    circle.children[i].className = '';
                }
                // 将当前点击的小圆圈添加样式
                this.className = 'current';
                // 获取当前li的索引号
                var num = this.getAttribute('number');
                console.log(num);
                // console.log(index);
                // 当点击小圆圈时图片移动相应的距离
                animate(ul, -(liWidth * num));
                num++;
                // 当索引等于ol中li的长度索引变为零
                if (num == circle.children.length) {
                    num = 0;
                }
            })
        }

        // 克隆第一张图片添加到ol中的末尾
        var clone = ul.children[0].cloneNode(true);
        ul.appendChild(clone);

        // 点击有按钮图片向左移动
        next.onclick = function() {
            if (flag) {
                flag = false;
                // ul.style.left = "-" + (sliderWidth * index) + 'px';
                if (index >= lis.length) {
                    //当运动到0位置时立马index变为0执行下面函数
                    ul.style.left = 0; //相当于起到一个过渡作用
                    index = 0;
                }
                animate(ul, -(liWidth * (index + 1)), function() {
                    flag = true;
                })
                index++;
                //用来设置小圆圈索引
                round++;
                // 当跑到最后一个时立刻变为第一个
                if (round == circle.children.length) {
                    round = 0;
                }
                circleChange();
            }
        }


        //左边按钮
        pre.onclick = function() {
            if (flag) {
                flag = false;
                // ul.style.left = "-" + (sliderWidth * index) + 'px';
                if (index == 0) {
                    index = lis.length;
                    console.log(index);
                    //当运动到0位置时立马index变为0执行下面函数
                    ul.style.left = -liWidth * index + 'px'; //相当于起到一个过渡作用
                }
                animate(ul, -liWidth * (index - 1), function() {
                    flag = true;
                })
                index--;

                if (round == 0) {
                    round = circle.children.length;
                }
                round--;
                circleChange();
            }
        }

        function circleChange() {
            for (var i = 0; i < circle.children.length; i++) {
                circle.children[i].className = '';
            }
            circle.children[round].className = 'current';
        }

        var timer = setInterval(function() {
            next.click();
        }, 2000)
    </script>

</body>

</html>
WDrige
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简易轮播图

原生js轮播图代码：<!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="./animate.j
复制链接

扫一扫