这篇文章给大家分享的是有关JavaScript如何实现带缩略图的轮播效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

代码：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>*{padding:0;margin:0;}#content{width:400px;height:500px;margin:10pxauto;position:relative;border:1pxsolid#000;color:red;font-size:20px;}#title,#bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}#bottom{bottom:0;cursor:pointer;}#bottomspan{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}#bottomspan.active{background:#FFFF33;}#bottomspandiv{position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}#bottomspandiv:after{content:'';position:absolute;left:49px;bottom:-12px;border-top:7pxsolid#fff;border-right:5pxsolidtransparent;border-bottom:5pxsolidtransparent;border-left:5pxsolidtransparent;}#bottomspanimg{width:100px;height:100px;border:5pxsolid#fff;}#left,#right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}#left:hover,#right:hover{filter(opacity:100);opacity:1;}#left{left:0px;}#right{right:0px;}#img{width:400px;height:500px;}</style><script>window.onload=function(){varbottom=$('bottom'),title=$('title'),img=$('img'),left=$('left'),right=$('right');varaSpan=bottom.getElementsByTagName('span');varaDiv=bottom.getElementsByTagName('div');vararr=['图片一','图片二','图片三','图片四'];varnum=0;//初始化picTab();//点击下一张right.onclick=function(){if(num===aDiv.length-1)num=-1;num++;picTab();}//点击上一张left.onclick=function(){if(num===0)num=aDiv.length;num--;picTab();}functionpicTab(){title.innerHTML=arr[num];img.src='img/'+(num+1)+'.png';for(vari=0;i<aSpan.length;i++){aSpan[i].className='';}aSpan[num].className='active';}//鼠标移入移出显示缩略图for(vari=0;i<aSpan.length;i++){aSpan[i].index=i;aSpan[i].onmouseover=function(){aDiv[this.index].style.display='block';}aSpan[i].onmouseout=function(){aDiv[this.index].style.display='none';}aSpan[i].onclick=function(){num=this.index;picTab();}}function$(id){returndocument.getElementById(id);}}</script></head><body><divid="content"><divid="title">带缩略图的轮播</div><divid="left"><</div><divid="right">></div><divid="bottom"><span><div><imgsrc="img/1.png"/></div></span><span><div><imgsrc="img/2.png"/></div></span><span><div><imgsrc="img/3.png"/></div></span><span><div><imgsrc="img/4.png"/></div></span></div><imgsrc=""id="img"/></div></body></html>

感谢各位的阅读！关于“JavaScript如何实现带缩略图的轮播效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！