| 本文实例为大家分享了JS实现图片自动播放效果的具体代码，供大家参考，具体内容如下 JS实现图片自动播放
1、先看效果图 
2、完整代码 <!DOCTYPE html><html><head> <style> /* 定义样式 */ body{ margin: 5% 30%; } .bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px #142732;} .box{width:700px;height:400px;margin:0px auto;overflow: hidden;} /* box的宽度为img的个数乘以bannerimage的宽度*/ .img-g{width:4900px;height:400px;position:relative;} .img-g img{float:left;width:700px;height:400px;} .button-g{position:relative;top:-35px;text-align:center;} .button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function () { // 实现自动播放 var p=document.getElementsByClassName('img-g')[0]; var button=document.querySelectorAll('.button-g span') // 设置3秒播放 window.timer=setInterval(move,3000); // 轮播设置 function move(){ // bannerimage的宽度乘以图片的个数 if(parseInt(p.style.left)>-4200){ // 和bannerimage的宽度保持一致即可：700 p.style.left=parseInt(p.style.left)-700+'px' p.style.transition='left 1s'; tog(-Math.round(parseInt(p.style.left)/700)) if(parseInt(p.style.left)<=-4200){ setTimeout(function(){ tog(0) p.style.left='0px' p.style.transition='left 0s'; },1000) } }else{ p.style.left='0px' p.style.transition='left 0s'; } } // 设置小圆点 for(var i=0;i<button.length;i++){ // button[i].style.backgroundColor='#eee'; button[i].onclick=function(){ p.style.left=-700*this.getAttribute('data-index')+'px' tog(this.getAttribute('data-index')) clearInterval(window.timer) window.timer=setInterval(move,3000); } } // 设置小圆点 function tog(index){ if(index>5){ tog(0); return; } for(var i=0;i<button.length;i++){ button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)'; } button[index].style.backgroundColor='rgb(255, 255, 255)'; } // 鼠标移上事件 p.onmouseover=function(){ clearInterval(window.timer) } // 鼠标移除事件 p.onmouseout=function(){ window.timer=setInterval(move,3000); } }); </script></head><body> <div class="bannerimage"> <div class='box'> <div class='img-g' style='left:0px;transition:left 1s;'> <img src="images/img_1.jpg" alt="1"> <img src="/images/img_2.jpg" alt="2"> <img src="/images/img_3.jpg" alt="3"> <img src="/images/img_4.jpg" alt="4"> <img src="/images/img_5.jpg" alt="5"> <img src="/images/img_6.jpg" alt="6"> <img src="/images/img_1.jpg" alt="1"> </div> <div class='button-g'> <span data-index='0' style="background-color: #eeeeee"></span> <span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span> <span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span> <span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span> <span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span> <span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span> </div> </div> </div></body></html>3、关键代码讲解 3.1、css设置注意事项：img-g的宽度为：img的个数乘以bannerimage的宽度，如下： .img-g{width:4900px;height:400px;position:relative;}3.2、轮播常量及事件设置 常量1设置为：bannerimage的宽度乘以图片的个数，如下： if(parseInt(p.style.left)>-4200){}常量2设置为：bannerimage的宽度保持一致即可（700），如下： p.style.left=parseInt(p.style.left)-700+'px' 小圆点显示设置： // 设置小圆点for(var i=0;i<button.length;i++){ button[i].style.backgroundColor='#eee'; button[i].onclick=function(){ p.style.left=-700*this.getAttribute('data-index')+'px' tog(this.getAttribute('data-index')) clearInterval(window.timer) window.timer=setInterval(move,3000); }}// 设置小圆点点击事件function tog(index){ // 圆点的个数 if(index>5){ tog(0); return; } for(var i=0;i<button.length;i++){ // 默认圆点的显示颜色 button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)'; } // 当前圆点的显示颜色 button[index].style.backgroundColor='rgb(255, 255, 255)';}鼠标事件：鼠标移上停止播放，移除3秒后播放。 // 鼠标移上事件p.onmouseover=function(){ clearInterval(window.timer)}// 鼠标移除事件p.onmouseout=function(){ window.timer=setInterval(move,3000);}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
JS实现前端分页效果
Vue实现PC端分辨率自适应的示例代码 |
