原生js实现轮播图效果(无缝滚动)

最新推荐文章于 2021-03-09 21:43:31 发布

置顶苦瓜式的幽默

最新推荐文章于 2021-03-09 21:43:31 发布

阅读量574

点赞数 1

分类专栏：前端文章标签： javascript css css3 es6 html5

本文链接：https://blog.csdn.net/are_gh/article/details/112001919

版权

前端专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文介绍了一种使用原生JavaScript实现轮播图无缝滚动的方法，包括鼠标进入和离开时的按钮显示与隐藏，动态生成小圆点导航，以及点击小圆点和左右按钮实现图片切换。代码中利用事件监听处理鼠标交互，并通过定时器实现自动播放功能，确保了轮播图的平滑过渡效果。

摘要由CSDN通过智能技术生成

原生js实现轮播图效果(无缝滚动)

<!DOCTYPE html>
<html lang="en">
<!-- day07  7-10-14 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./images1/20.animate.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .focus {
            /*overflow: hidden;*/
            position: absolute;
            top: 100px;
            left: 200px;
            width: 721px;
            height: 455px;
            background-color: brown;
        }
        
        .prev,
        .next {
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, .3);
            text-decoration: none;
            color: #fff;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            z-index: 2;
        }
        
        .focus ul {
            /* 引入动画js文件要求必须有定位 */
            position: absolute;
            width: 600%;
        }
        
        .focus ul li {
            float: left;
        }
        
        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        
        .next {
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        
        .promo-nav {
            position: absolute;
            bottom: 10px;
            left: 60px;
            width: 200px;
            height: 18px;
            border-radius: 9px;
        }
        
        .promo-nav li {
            float: left;
            width: 10px;
            height: 10px;
            background-color: #fff;
            margin: 2px;
            border-radius: 50%;
        }
        
        .promo-nav .current {
            background-color: orange;
        }
        .focus ul li a img {
          width: 721px;
            height: 455px;
        }
    </style>
</head>

<body>
    <div class="focus">
        <ul>
            <li>
                <a href="#"><img src="images1/focu01.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images1/focu02.jpg" alt=""></a>
            </li>

            <li>
                <a href="#"><img src="images1/focu03.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="images1/focu04.jpg" alt=""></a>
            </li>


        </ul>
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="prev">&lt;</a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="next">&gt;</a>

        <ol class="promo-nav">

        </ol>
    </div>
    <script>
        window.addEventListener('load', function() {
            var focus = document.querySelector('.focus');
            var prev = document.querySelector('.prev');
            var next = document.querySelector('.next');
            var focusWidth = focus.offsetWidth;
            //鼠标经过
            focus.addEventListener('mouseenter', function() {
                    prev.style.display = 'block';
                    next.style.display = 'block';
                    clearInterval(timer);
                    timer = null; //清除定时器变量

                })
                //鼠标离开
            focus.addEventListener('mouseleave', function() {
                    prev.style.display = 'none';
                    next.style.display = 'none';
                    timer = setInterval(function() {
                        next.click();
                    }, 2000)

                })
                //3.动态生成小圆圈 有几张图片 就生成几个小圆圈
            var ul = focus.querySelector('ul');
            var ol = focus.querySelector('.promo-nav');
            // console.log(ul.children.length); 4
            for (var i = 0; i < ul.children.length; i++) {
                //创建一个li
                var li = document.createElement('li');
                //记录当前小圆圈的索引号 通过自定义属性来做
                li.setAttribute('index', i);
                //插入到ol后面
                ol.appendChild(li);
                //4.鼠标点击小圆圈小圆圈变色(给小圆圈添加current类其余小圆圈移除这个类)(排他思想)
                //在生成小圆圈的同时直接绑定点击事件
                li.addEventListener('click', function() {
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    this.className = 'current';


                    //5.点击小圆点 移动图片 移动的是ul
                    //ul移动的距离 小圆圈的索引号乘以图片宽度 注意是负值
                    //当我们点击了某个小li就得到了当前小li的索引号
                    var index = this.getAttribute('index');
                    //当我们点击了某个li就把li的索引号给num
                    num = index;
                    //当我们点击了某个li就把li的索引号给index
                    circle = index;
                    console.log(index);

                    animate(ul, -index * focusWidth, );
                })

            }
            //把ol里面的第一个li北京颜色设置成白色
            ol.children[0].className = 'current';
            //6.  克隆第一张li放到ul后面
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            //7.点击右侧按钮图片滚动一张
            var num = 0;
            var circle = 0;
            var flag = true;
            //右侧按钮
            next.addEventListener('click', function() {
                    if (flag) {
                        flag = false; //先关闭节流阀
                        //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)
                        if (num == ul.children.length - 1) {
                            ul.style.left = 0;
                            num = 0;
                        }
                        num++;
                        animate(ul, -num * focusWidth, function() {
                            flag = true;
                        });
                        //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化
                        circle++;
                        //如果 circle等于4说明做到最后克隆的这张图片了 我们就复原
                        if (circle == ol.children.length) {
                            circle = 0;
                        }
                        // //清除其余小圆圈类名
                        // for (var i = 0; i < ol.children.length; i++) {
                        //     ol.children[i].className = '';
                        // }
                        // //留下当前小圆圈current类名
                        // ol.children[circle].className = 'current';
                        circleChange();
                    }
                })
                //左侧按钮
            prev.addEventListener('click', function() {
                if (flag) {
                    flag = false;
                    //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)
                    if (num == 0) {
                        num = ul.children.length - 1;
                        ul.style.left = -num * focusWidth + 'px';

                    }
                    num--;
                    animate(ul, -num * focusWidth, function() {
                        flag = true;
                    });
                    //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化
                    circle--;
                    //如果 circle小于0小圆圈要改为第四个小圆圈
                    if (circle < 0) {
                        circle = ol.children.length - 1;
                    }
                    // 清除其余小圆圈类名
                    // for (var i = 0; i < ol.children.length; i++) {
                    //     ol.children[i].className = '';
                    // }
                    // 留下当前小圆圈current类名
                    // ol.children[circle].className = 'current';
                    circleChange();
                }
            })

            function circleChange() {
                //清除其余小圆圈类名
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                //留下当前小圆圈current类名
                ol.children[circle].className = 'current';
            }

            //10.自动播放轮播图
            var timer = setInterval(function() {
                next.click();
            }, 2000)




        })
    </script>
</body>

</html>

苦瓜式的幽默

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
原生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</tit
复制链接

扫一扫