javaScript轮播图案例(小圆圈和按钮，自动播放相互影响）

（

需要完善的地方：

1、函数封装到.js文件,通过函数调用简化代码

2、没有设置轮播图的播放动画，并没有用cloneNode()方法去解决轮播空白的问题；

3、关于if函数、for循环等里面的条件也没有完全用参数代替，而是写死了。

）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="网站首页.css" type="text/css" rel="stylesheet" />
    <title>首页</title>
    <style></style>
</head>

<body>
    <div>导航栏</div>
    <!-- 轮播图 播放框-->
    <div id="rotation">
        <!-- 用div模拟精灵图 -->
        <div class="phote">
            <!-- 图片的宽高一样 -->
            <img src="images/1.png">
            <img src="images/2.jpg">
            <img src="images/3.jpg">
            <img src="images/纯黑.jpg">
        </div>
        <!-- 设置两个按钮 -->
        <div class="leftArrow"><img src="images/left.jpg"></div>
        <div class="rightArrow"><img src="images/right.jpg"></div>
    </div>
    <!-- 图片下面的小圆圈 -->
    <div class="dots">
        <ul>
            <!-- <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li> -->
        </ul>
    </div>

    <script>
        //页面加载完成之后再执行js命令行
        window.addEventListener('load', function() {
            //var 获取元素
            // 左按钮
            var leftArrow = document.querySelector('.leftArrow');
            // 右按钮
            var rightArrow = document.querySelector('.rightArrow');
            // 精灵图或者是放在div里面并排图片
            var phote = document.querySelector('.phote');
            // 用来显示轮播图的div
            var rotation = document.querySelector('#rotation');
            var dots = document.querySelector('.dots');
            var ul = document.querySelector('ul');
            var circle = 0;

            // 1、点击小圆点也可以选择图片
            //小圆圈的模块跟随图片的张数变动：创建节点，插入节点操作


            // 利用for循环插入li,根据图片的张数
            for (var i = 0; i < phote.children.length; i++) {
                // 创建一个li
                var li = document.createElement('li');
                //创建li的时候，创建索引号
                //setAttribute 创建元素
                li.setAttribute('index', i);
                // li插入ul里面
                ul.appendChild(li);
                // 在生成小圆圈的时候，绑定点击事件
                ul.children[0].className = 'dot';
                li.addEventListener('click', function() {
                    //给li添加 类名,点击改变颜色
                    //需要用排他思想，只给点击的那一个保留新的样式
                    for (var i = 0; i < ul.children.length; i++) {
                        ul.children[i].className = ' ';
                    };
                    this.className = 'dot';
                    //点击小圆圈时候需要移动图片，移动的距离小圆圈的索引号*图片宽度；也就是要知道点击的是第几个小圆圈。
                    // console.log(this);
                    var ind = this.getAttribute('index');
                    console.log(ind);
                    phote.style.left = -ind * 153 + 'px';
                    circle = ind;
                    for (var i = 0; i < ul.children.length; i++) {
                        ul.children[i].className = '';
                    }
                    if (circle == 4) {
                        circle = 0;
                    }
                    ul.children[circle].className = 'dot';
                    console.log(circle);


                })
            }
            //console.log(ul.children.length); ul里面li的个数
            // 图片轮播的时候，对应小圆点的颜色也跟着变化
            //排他思想：
            animation(phote, -459);
            //设置鼠标放到图片时，停止循环轮播，停止定时器
            rotation.addEventListener('mouseover', function() {
                    clearInterval(phote.timer);
                    //鼠标经过， 显示左右按钮
                    leftArrow.style.display = 'block';
                    rightArrow.style.display = 'block';
                }) //鼠标离开图片时，又继续循环播放
            rotation.addEventListener('mouseout', function() {
                animation(phote, -459); // 鼠标离开，又隐藏按钮
                leftArrow.style.display = 'none';
                rightArrow.style.display = 'none';
            })
            dots.addEventListener('mouseover', function() {
                clearInterval(phote.timer);
            })
            dots.addEventListener('mouseout', function() {
                    animation(phote, -459);
                })
                //左右按钮先隐藏，鼠标经过 轮播的窗口时，显示出来
                //手动触发 左按钮
            leftArrow.addEventListener('click', function() {
                // animation(phote, -306);
                if (phote.offsetLeft == 0) {
                    phote.style.left = -459 + 'px';
                    circle = 3;
                } else {
                    phote.style.left = phote.offsetLeft + 153 + 'px';
                    circle--;
                }
                //circle来控制和影响小圆圈
                for (var i = 0; i < ul.children.length; i++) {
                    ul.children[i].className = '';
                }
                ul.children[circle].className = 'dot';


            }); // 手动触发右按钮 var circle=0;
            rightArrow.addEventListener('click', function() { // animation(phote, -306);不能调用循环播放的函数，因为按钮是一次播放
                if (phote.offsetLeft <= -459) {
                    phote.style.left = 0 + 'px';
                    circle = 0;
                } else {
                    phote.style.left = phote.offsetLeft - 153 + 'px';
                    circle++;
                } // 和索引号绑定 //按钮控制圆圈，跟随图片一起dong 

                if (circle == 4) {
                    circle = 0
                }
                for (var i = 0; i < ul.children.length; i++) {
                    ul.children[i].className = '';
                }
                ul.children[circle].className = 'dot';
            }); //打开浏览器之后开始自动循环播放，通过函数调用的方式 
            function animation(obj, target) {
                //console.log(obj.offsetLeft);
                obj.timer = setInterval(function() {
                    if (obj.offsetLeft <= target) { // 回到第一张图片 
                        obj.style.left = 0 +
                            'px';
                    } else { // 从左往右循环，和右按钮一样 
                        obj.style.left = obj.offsetLeft - 153 + 'px';
                    }

                    circle++;
                    if (circle == 4) {
                        circle = 0;
                    }
                    for (var i = 0; i < 4; i++) {
                        ul.children[i].className = '';
                    }
                    ul.children[circle].className = 'dot';
                }, 2000);


            }


        })
    </script>
</body>

</html>

css样式代码

       * {
           margin: 0;
           padding: 0;
       }
       /* 播放轮播图的div */
       
       #rotation {
           position: relative;
           width: 153px;
           height: 153px;
           /* 溢出隐藏 */
           overflow: hidden;
           background-color: antiquewhite;
           margin: 0 auto;
       }
       /* @keyframes rotationmap {
           0% {
               margin-left: 0px;
           }
           50% {
               margin-left: -153px;
           }
           100% {
               margin-left: -306px;
           }
       } */
       /* 放置图片的div */
       
       .phote {
           position: absolute;
           top: 0;
           left: 0;
           height: 153px;
           /* 设置宽度为父盒子的4倍，当然也可以设置大的 */
           width: 400%;
           /* background-color: aquamarine; */
           /* animation: rotationmap 2s 1; */
       }
       /* 图片样式 */
       
       .phote img {
           float: left;
       }
       /* 坐按钮 */
       
       .leftArrow {
           /* 隐藏 */
           display: none;
           position: absolute;
           top: 65px;
           left: 0px;
       }
       /* 右按钮 */
       
       .rightArrow {
           /* 隐藏 */
           display: none;
           position: absolute;
           top: 65px;
           left: 131px;
       }
       /* 图下面的小圆点 */
       
       .dots {
           margin: 0 auto;
           width: 153px;
           height: 10px;
           background-color: rgba(35, 160, 83, 0.137);
       }
       
       .dots ul {
           margin-left: 30px;
       }
       
       .dots ul li {
           list-style: none;
           width: 10px;
           height: 10px;
           float: left;
           margin-right: 5px;
           border-radius: 10px;
           background-color: rgba(216, 132, 132, 0.842);
           z-index: 1;
       }
       
       .dot {
           background-color: wheat !important;
       }

posted @ 2022-02-21 16:06 甜酒1996 阅读(379) 评论(0) 收藏举报

刷新页面返回顶部

甜酒1996

与君共勉：知识库的强大在于大家的分享。我的随笔内容是我学习的笔记，结合了网上的知识点和自己的理解，如有侵权或不严谨或不正确的知识点，感谢您的评论指正，我会及时通过删除或修正等方式更新博客。

javaScript轮播图案例(小圆圈和按钮，自动播放相互影响）

公告

甜酒1996

与君共勉：知识库的强大在于大家的分享。 我的随笔内容是我学习的笔记，结合了网上的知识点和自己的理解，如有侵权或不严谨或不正确的知识点，感谢您的评论指正，我会及时通过删除或修正等方式更新博客。

javaScript轮播图案例(小圆圈和按钮，自动播放相互影响）

公告

与君共勉：知识库的强大在于大家的分享。我的随笔内容是我学习的笔记，结合了网上的知识点和自己的理解，如有侵权或不严谨或不正确的知识点，感谢您的评论指正，我会及时通过删除或修正等方式更新博客。