这篇文章主要介绍“JavaScript如何实现首页图片轮播图效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现首页图片轮播图效果”文章能帮助大家解决问题。
一、轮番图
效果展示：
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。
二、源码展示
设置body
<body> <div class="m-view"> <div class="slide" > <img src="1.jpg" alt="4"> <img src="2.jpg" alt="0"> <img src="3.jpg" alt="1"> <img src="4.jpg" alt="2"> <img src="5.jpg" alt="3"> <img src="3.jpg" alt="4"> <img src="2.jpg" alt="0"> </div> <div class="prev"><</div> <div class="next">></div> <div class="pointer"> <span class="button on" index="0"></span> <span class="button" index="1"></span> <span class="button" index="2"></span> <span class="button" index="3"></span> <span class="button" index="4"></span> </div> </div>样式设置
<style> .m-view,.m-view .slide img{ position: relative; width: 500px; height: 300px; } .m-view{ overflow: hidden; } .m-view .slide{ position: absolute; width: 500px; height: 300px; } .m-view .slide img{ margin-right: -5px; } .m-view .prev,.m-view .next{ position: absolute; top: 40%; font: 60px/60px Microsoft YaHei; color: #00BFFF; } .m-view .prev{ left: 10px; } .m-view .next{ right: 10px; } .m-view .pointer{ position: absolute; bottom: 40px; left: 33%; } .m-view .pointer span{ display: inline-block; width: 40px; height: 40px; border-radius: 20px; margin-right: 10px; background-color: #00FF00; } .m-view .pointer .on{ background-color: #1E90FF; } img{ object-fit: contain; } </style>实现轮番
var view=document.getElementsByClassName('m-view')[0]; var slide=document.getElementsByClassName('slide')[0]; var prev=document.getElementsByClassName('prev')[0]; var next=document.getElementsByClassName('next')[0]; var button=document.getElementsByClassName('button'); var curIndex=0;//当前图片的索引位置 var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换 function Toggle () { var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数 var time=800;//每切换一张图片总共用的时长 var times=time/TIMER;//每切换一张图片需滑动的次数 var stepLenth=800/times;//每次滑动的步长 var leftToggle=function () { var t1=times; function leftStep(){ slide.style.left=parseInt(slide.style.left)+stepLenth+"px"; t1--; if (!t1) { clearInterval(interval); curIndex--; if (curIndex<0) { slide.style.left=parseInt(slide.style.left)-4000+"px"; curIndex=4; }; toggled=true; }; }; if (toggled==true) { toggled=false; button[curIndex].className="button"; if (curIndex!=0) { button[curIndex-1].className="button on"; }else{ button[curIndex+4].className="button on"; } var interval=setInterval(leftStep,TIMER); }; }; var rightToggle=function () { var t2=times; function leftStep(){ slide.style.left=parseInt(slide.style.left)-stepLenth+"px"; t2--; if (!t2) { clearInterval(interval); curIndex++; if (curIndex>4) { slide.style.left=parseInt(slide.style.left)+4000+"px"; curIndex=0; }; toggled=true; }; }; if (toggled==true) { toggled=false; button[curIndex].className="button"; if (curIndex!=4) { button[curIndex+1].className="button on"; }else{ button[curIndex-4].className="button on"; }; var interval=setInterval(leftStep,TIMER); }; } this.leftToggle=leftToggle;//输出对外的接口 this.rightToggle=rightToggle; }; var toggle=new Toggle(); prev.onclick=function () { toggle.leftToggle(); }; next.onclick=function () { toggle.rightToggle(); }; for (var i = 0; i < button.length; i++) { button[i].onclick=function () { var newIndex=parseInt(this.getAttribute("index")); if (newIndex!=curIndex) { var distance=-800*(newIndex-curIndex); slide.style.left=parseInt(slide.style.left)+distance+"px"; button[curIndex].className="button"; button[newIndex].className="button on"; curIndex=newIndex; }; }; } var intervalo=setInterval(toggle.rightToggle,3000); view.onmouseover=function () { clearInterval(intervalo); } view.onmouseout=function () { intervalo=setInterval(toggle.rightToggle,3000); }关于“JavaScript如何实现首页图片轮播图效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
