其他分享
首页 > 其他分享> > js实现轮播图

js实现轮播图

作者：互联网




  1  <style>
  2         * {
  3             padding: 0;
  4             margin: 0;
  5         }
  6         /* 1.轮播图容器  */
  7         .slide {
  8             width: 600px;
  9             height: 400px;
 10             margin: 100px auto;
 11             position: relative;
 12         }
 13 
 14         /* 1.1图片 */
 15         .slide img {
 16             width: 100%;
 17             height: 100%;
 18         }
 19         /* 1.2上一张按钮 */
 20         .slide .prev,
 21         .slide .next {
 22             position: absolute;
 23             width: 50px;
 24             height: 50px;
 25             line-height: 50px;
 26             background-color: #666;
 27             top: 50%;
 28             text-align: center;
 29             border-radius: 50%;
 30             color: #fff;
 31             font-size: 26px;
 32             transform: translateY(-50%);
 33         }
 34         .slide .prev {
 35             left: 10px;
 36         }
 37 
 38         /* 1.3下一张按钮 */
 39         .slide .next {
 40             right: 10px;
 41         }
 42 
 43         /* span小圆点 */
 44         .circles {
 45             position: absolute;
 46             bottom: 10px;
 47             width: 160px;
 48             height: 16px;
 49             left: 50%;
 50             z-index: 10;
 51             transform: translateX(-50%);
 52         }
 53 
 54         .circles span {
 55             display: inline-block;
 56             width: 16px;
 57             height: 16px;
 58             margin: 0 10px;
 59             background-color: #fff;
 60             border-radius: 50%;
 61         }
 62 
 63         .circles .active {
 64             background-color: aqua;
 65         }
 66     </style>
 67 </head>
 68 
 69 <body>
 70     <!-- 轮播图容器 -->
 71     <div class="slide">
 72         <!--1.1 图片 -->
 73         <img src="./img/02.webp" alt="">
 74         <!-- 1.2上一张按钮 -->
 75         <div class="prev">
 76             < </div>
 77                 <!-- 1.3下一张按钮 -->
 78                 <div class="next">></div>
 79                 <!--1.4小圆点  -->
 80                 <div class="circles">
 81                     <!-- 用map方法动态渲染小圆圈 -->
 82                     <!-- <span class="active"></span>
 83                     <span></span>
 84                     <span></span>
 85                     <span></span> -->
 86                 </div>
 87 
 88         </div>
 89 
 90         <script>
 91             // 定义数组，保存所有图片路径
 92             var arr = ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp']
 93             // 获取图片的dom元素
 94             var img = document.querySelector('img');
 95 
 96             var slide = document.querySelector('.slide');
 97 
 98             // 默认从0开始
 99             var index = 0;
100             // 定义变量保存定时器标识
101             var timeId;
102 
103             // 获取小圆点大容器
104             var circles = document.querySelector('.circles')
105             // 获取上一张按钮
106             var prev = document.querySelector('.prev')
107 
108             // 获取下一张按钮
109             var next = document.querySelector('.next')
110 
111 
112             // 开启定时器 更换图片集
113             // 开启自动轮播 调用下面封装的方法
114             autoPlay()
115             //   渲染小圆点 
116             render()
117             // 给slide添加鼠标移入和移出时间
118             slide.addEventListener('mouseover', function () {
119                 // 鼠标移入清除定时器
120                 clearInterval(timeId)
121             })
122             slide.addEventListener('mouseout', function () {
123                 // 鼠标离开自动开启定时器：就是把上面的代码复制一份
124                 // 开启自动轮播 调用下面封装的方法
125                 autoPlay()
126                
127 
128             })
129             // 给上一张和下一张添加点击事件
130             prev.addEventListener('click', function () {
131                 // 更改下标
132                 index = --index === -1 ? arr.length - 1 : index;
133                 //   显示图片
134                 img.src = arr[index];
135                 // 重新渲染小圆点
136                 render()
137             })
138             next.addEventListener('click', function () {
139                 // 更改下标
140                 index = ++index === arr.length - 1 ? 0 : index;
141                 //   显示图片
142                 img.src = arr[index];
143                 // 重新渲染小圆点
144                 render()
145             })
146 
147             // 封装函数 鼠标移入前的轮播，和鼠标离开后的轮播代码重复
148             // 轮播图渲染方法
149             function autoPlay() {
150                 timeId = setInterval(function () {
151                     // 定义变量，保存默认显示的图片下标
152                     // 更改下标 注意不能一直加 因为数组长度是4，超过4让它从0开始再次轮回（用三目运算）
153                     index = ++index === arr.length ? 0 : index;
154                     // 每隔一秒更换下一张图片路径
155                     img.src = arr[index];
156 
157                     // 定时器开启时渲染小圆点重新激活
158                     render()
159                 }, 1000)
160             }
161             // 封装小圆点的渲染
162             function render() {
163                 circles.innerHTML = arr.map(function (item, i) {
164                     // i是当前小圆点 index是当前下标
165                     return `  <span class=${index === i ? 'active' : ''}></span>`;
166                     // 数组转字符串用join
167                 }).join('');
168             }
169         </script>





 


 



案例总结：


1、图片要放入数组，添加定时器每秒钟让图片换下一张可以调用下标来完成，数字超过图片数量从第一张开始播放。


2、添加鼠标移入移出事件，鼠标移入清除定时器，鼠标离开自动开启定时器同时开启自动轮播。


3、给上一张下一张按钮添加点击事件，每次点击下标改变图片轮播图更换


注意：重复代码请封装函数，避免代码冗余，以便于复用代码。


结语：荣姐，加油！！！


 <style>
        * {
            padding: 0;
            margin: 0;
        }
        /* 1.轮播图容器  */
        .slide {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            position: relative;
        }


        /* 1.1图片 */
        .slide img {
            width: 100%;
            height: 100%;
        }
        /* 1.2上一张按钮 */
        .slide .prev,
        .slide .next {
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: #666;
            top: 50%;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            font-size: 26px;
            transform: translateY(-50%);
        }
        .slide .prev {
            left: 10px;
        }


        /* 1.3下一张按钮 */
        .slide .next {
            right: 10px;
        }


        /* span小圆点 */
        .circles {
            position: absolute;
            bottom: 10px;
            width: 160px;
            height: 16px;
            left: 50%;
            z-index: 10;
            transform: translateX(-50%);
        }


        .circles span {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin: 0 10px;
            background-color: #fff;
            border-radius: 50%;
        }


        .circles .active {
            background-color: aqua;
        }
    </style>
</head>


<body>
    <!-- 轮播图容器 -->
    <div class="slide">
        <!--1.1 图片 -->
        <img src="./img/02.webp" alt="">
        <!-- 1.2上一张按钮 -->
        <div class="prev">
            < </div>
                <!-- 1.3下一张按钮 -->
                <div class="next">></div>
                <!--1.4小圆点  -->
                <div class="circles">
                    <!-- 用map方法动态渲染小圆圈 -->
                    <!-- <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span> -->
                </div>


        </div>


        <script>
            // 定义数组，保存所有图片路径
            var arr = ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp']
            // 获取图片的dom元素
            var img = document.querySelector('img');


            var slide = document.querySelector('.slide');


            // 默认从0开始
            var index = 0;
            // 定义变量保存定时器标识
            var timeId;


            // 获取小圆点大容器
            var circles = document.querySelector('.circles')
            // 获取上一张按钮
            var prev = document.querySelector('.prev')


            // 获取下一张按钮
            var next = document.querySelector('.next')



            // 开启定时器 更换图片集
            // 开启自动轮播 调用下面封装的方法
            autoPlay()
            //   渲染小圆点 
            render()
            // 给slide添加鼠标移入和移出时间
            slide.addEventListener('mouseover', function () {
                // 鼠标移入清除定时器
                clearInterval(timeId)
            })
            slide.addEventListener('mouseout', function () {
                // 鼠标离开自动开启定时器：就是把上面的代码复制一份
                // 开启自动轮播 调用下面封装的方法
                autoPlay()
               


            })
            // 给上一张和下一张添加点击事件
            prev.addEventListener('click', function () {
                // 更改下标
                index = --index === -1 ? arr.length - 1 : index;
                //   显示图片
                img.src = arr[index];
                // 重新渲染小圆点
                render()
            })
            next.addEventListener('click', function () {
                // 更改下标
                index = ++index === arr.length - 1 ? 0 : index;
                //   显示图片
                img.src = arr[index];
                // 重新渲染小圆点
                render()
            })


            // 封装函数 鼠标移入前的轮播，和鼠标离开后的轮播代码重复
            // 轮播图渲染方法
            function autoPlay() {
                timeId = setInterval(function () {
                    // 定义变量，保存默认显示的图片下标
                    // 更改下标 注意不能一直加 因为数组长度是4，超过4让它从0开始再次轮回（用三目运算）
                    index = ++index === arr.length ? 0 : index;
                    // 每隔一秒更换下一张图片路径
                    img.src = arr[index];


                    // 定时器开启时渲染小圆点重新激活
                    render()
                }, 1000)
            }
            // 封装小圆点的渲染
            function render() {
                circles.innerHTML = arr.map(function (item, i) {
                    // i是当前小圆点 index是当前下标
                    return `  <span class=${index === i ? 'active' : ''}></span>`;
                    // 数组转字符串用join
                }).join('');
            }
        </script>


标签：index,arr,轮播,img,实现,js,slide,var,小圆点	

来源： https://www.cnblogs.com/meirongliu/p/16670783.html