本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下
1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片；
2. 鼠标离开，恢复自动播放；
3. 点击下方中间几个小圆圈，也会自动切换图片；
源代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .lunbotu { position: relative; width: 520px; height: 280px; margin: 50px auto; background-color: blue; overflow: hidden; } .left, .right { display: none; position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; background-color: cornsilk; border-radius: 15px; text-align: center; line-height: 30px; cursor: pointer; z-index: 1; } .left { left: 0; } .right { right: 0; } li { list-style: none; } .firstul { position: absolute; top: 0; left: 0; width: 500%; } .firstul li { float: left; } ol { padding: 0 5px 0 5px; position: absolute; bottom: 10px; left: 50%; margin-left: -45px; background-color: darkgrey; text-align: center; border-radius: 9px; } ol li { display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin-right: 5px; background-color: white; cursor: pointer; } .current { background-color: red; } </style> <script src="animation.js"></script></head><body> <!-- 图片大小全部是520*280 --> <div class="lunbotu"> <!-- 左右按钮 --> <div class="left">></div> <div class="right"><</div> <!-- 图片部分 --> <ul class="firstul"> <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.gif" alt=""> </a></li> <li><a href=""><img src=" images/4.webp" alt=""> </a></li> </ul> <!-- 小圆圈 --> <ol class="firstol"></ol> </div> <!-- JS部分 --> <script> // 1.获取事件源 var lunbotu = document.querySelector('.lunbotu'); var leftBox = document.querySelector('.left'); var rightBox = document.querySelector('.right'); var ul = lunbotu.querySelector('ul'); var ol = lunbotu.querySelector('ol'); var right = document.querySelector('.right'); var left = document.querySelector('.left'); var lunbotuWidth = lunbotu.offsetWidth; // console.log(ul) // console.log(ol) // 第一步： // 鼠标经过轮播图的时候，左右小按钮弹出 lunbotu.addEventListener('mouseenter', function () { leftBox.style.display = 'block'; rightBox.style.display = 'block'; // 鼠标经过轮播图的时候，停止定时器 clearInterval(timer); }) // 鼠标离开轮播图的时候，左右小按钮隐藏 lunbotu.addEventListener('mouseleave', function () { leftBox.style.display = 'none'; rightBox.style.display = 'none'; timer = setInterval(function () { right.click(); }, 2000) }) // 第二步： // 1.动态生成小圆圈 // 2.小圆圈的个数要跟图片一样 // 3.先得到ul里面图片的张数(图片放入li里面，所以就是li的个数) // 4.利用循环动态生成小圆圈(这个小圆圈要放入ol里面) // 5.创建节点createElement('li')] // 6.插入节点ol.appendChild(li) // 7.第一个小圆圈需要添加current类 for (var i = 0; i < ul.children.length; i++) { // 创建一个li var li = document.createElement('li') // 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); // 把li添加到ol ol.appendChild(li); } // 排他思想：让小Li变白色 for (var i = 0; i < ol.children.length; i++) { ol.children[i].addEventListener('click', function () { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; // 点击小圆圈的时候切换到对应的图片 // 得到索引号 index var index = this.getAttribute('index'); // 解决小bug num = index; num_ol = index; // console.log(lunbotuWidth); // console.log(index) animation(ul, - index * lunbotuWidth) }) } // 给第一个li变颜色 ol.children[0].className = 'current'; // 克隆第一个li var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 第三步: // 点击右边按钮事件 var num = 0; // 点击右侧按钮的时候小圆圈跟着滚动 var num_ol = 0; // 节流阀，防止点击过快，最后才加这句优化 var flag = true; // 右侧按钮： right.addEventListener('click', function () { if (flag) { flag = false; // 关闭节流阀 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animation(ul, -num * lunbotuWidth, function () { flag = true; }); num_ol++; if (num_ol == ol.children.length) { num_ol = 0 } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[num_ol].className = 'current'; } }); // 左侧按钮： left.addEventListener('click', function () { if (flag) { flag = false; if (num == 0) { ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px'; num = ul.children.length - 1; } num--; animation(ul, -num * lunbotuWidth, function () { flag = true; }); num_ol--; // num_ol=0的时候需要，点击左侧按钮，需要转跳到ol.children.length-1的位置 if (num_ol < 0) { num_ol = ol.children.length - 1 } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[num_ol].className = 'current'; } }); // 自动播放图片 var timer = setInterval(function () { right.click(); }, 2000) </script></body></html>
5.Js文件的代码
// 封装了一个动画js文件function animation(obj,target,fn1){ // console.log(fn1); // fn是一个回调函数，在定时器结束的时候添加 // 每次开定时器之前先清除掉定时器 clearInterval( obj.timer); obj.timer = setInterval(function(){ // 步长计算公式 越来越小 // 步长取整 var step = (target - obj.offsetLeft) /10; step = step > 0 ? Math.ceil(step) :Math.floor(step); if(obj.offsetLeft == target){ clearInterval( obj.timer); // 如果fn1存在，调用fn if(fn1){ fn1(); } }else{ // 每50毫秒就将新的值给obj.left obj.style.left = obj.offsetLeft +step +'px'; } },30)}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
