js如何实现简单轮播图效果

这篇文章主要为大家展示了“js如何实现简单轮播图效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何实现简单轮播图效果”这篇文章吧。

具体内容如下

使用transform = translateX()实现的图片切换

<style>         .box {             position: relative;             overflow: hidden;             margin: 200px auto;             width: 600px;             height: 400px;         }                  .img {             width: 3000px;             height: 400px;         }                  img {             float: left;             width: 600px;             height: 400px;         }                  .btn {             position: absolute;             top: 350px;             left: 245px;             width: 110px;             height: 20px;         }                  .dian {             float: left;             margin: 5px;             width: 12px;             height: 12px;             border-radius: 50%;             background-color: rgba(255, 255, 255, 0.3);             cursor: pointer;         }                  .left,         .right {             display: none;             box-sizing: border-box;             position: absolute;             top: 150px;             width: 50px;             height: 100px;             background-color: rgba(0, 0, 0, 0.521);             font-size: 40px;             line-height: 100px;             color: #fff;         }                  .box:hover .left,         .box:hover .right {             display: block;         }                  .left {             padding-left: 10px;             left: 0;         }                  .right {             padding-right: 10px;             text-align: right;             right: 0;         } </style>

<div class="box">         <div class="img">             <img src="./img/1.jpeg" alt="">             <img src="./img/2.jpeg" alt="">             <img src="./img/3.jpeg" alt="">             <img src="./img/4.jpeg" alt="">             <img src="./img/5.jpeg" alt="">         </div>         <div class="btn">             <span class="dian"></span>             <span class="dian"></span>             <span class="dian"></span>             <span class="dian"></span>             <span class="dian"></span>         </div>         <div class="left">&lt; </div>         <div class="right">&gt;</div> </div>

<script>         var btn = document.getElementsByClassName('btn')[0];         var imgBox = document.getElementsByClassName('img')[0];         var imgs = imgBox.getElementsByTagName('img');         var btnChild = document.getElementsByClassName('dian');         var k = 0;         // 向按钮添加自定义属性         for (var i = 0; i < btnChild.length; i++) {             btnChild[i].dataset.num = i * 600;         }         // 默认为 第一张图片，第一个按钮为白色         btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)';         // 点击按钮切换图片，按钮变色         btn.onclick = function(e) {             if (e.target.nodeName === 'SPAN') {                 // 先让所有按钮为默认颜色                 for (var i = 0; i < btnChild.length; i++) {                     btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';                 }                 // 点击的按钮变色                 k = +e.target.dataset.num;                 console.log(k);                 btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';                 // 切换图片                 imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`;             }         }         // 获取图片长度         // var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2);         var imgWidth = imgs[0].offsetWidth;         // 定时器 移动图片         var interval1 = setInterval(move, 1000);         var interval;         // 函数 移动图片，改变按钮         function move() {             k += imgWidth;             if (k === imgWidth * imgs.length) {                 k = 0;             }             // 移动图片              imgBox.style.transform = `translateX(-${k}px)`;             // 改变按钮颜色             for (var i = 0; i < btnChild.length; i++) {                 btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';             }             btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';         }         // 鼠标移动到图片上 删除定时器         var box = document.getElementsByClassName('box')[0];         box.onmouseover = function() {             clearInterval(interval1);             clearInterval(interval);         }         // 鼠标移出 启动定时器         box.onmouseout = function() {             interval = setInterval(move, 1000);         }         var leftBtn = document.getElementsByClassName('left')[0];         var rightBtn = document.getElementsByClassName('right')[0];         rightBtn.onclick = function() {             k += imgWidth;             if (k === imgWidth * imgs.length) {                 k = 0;             }             // 移动图片              imgBox.style.transform = `translateX(-${k}px)`;             // 改变按钮颜色             for (var i = 0; i < btnChild.length; i++) {                 btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';             }             btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';         }         leftBtn.onclick = function() {             k -= imgWidth;             if (k < 0) {                 k = imgWidth * (imgs.length - 1);             }             imgBox.style.transform = `translateX(-${k}px)`;             // 改变按钮颜色             for (var i = 0; i < btnChild.length; i++) {                 btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';             }             btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';         } </script>

效果图：

以上是“js如何实现简单轮播图效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！