hao123网站大家都很熟悉吧，具体的效果不用我多说吧，感兴趣的朋友可以去参考效果图，下面小编给大家分享下实现代码思路，当然大家可以根据需求适当的添加修改删除代码。
关键代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative; margin:30px auto 0; overflow: hidden; } #box{ width: 600px; height: 750px; position: absolute; top: 0px; left: 0px; overflow: hidden; /*overflow-x:auto;*/ } #box #con{ width: 6000px; height: 750px; overflow: hidden; } #con img{ float: left; width: 600px; height: 750px; } #btnL{ position: absolute; left: 0px; top: 366px; width: 36px; height: 36px; background: url(images/btnL.png) 0 0 no-repeat; cursor: pointer; } #btnR{ position: absolute; right: 0px; top: 366px; width: 36px; height: 36px; background: url(images/btnR.png) 0 0 no-repeat; cursor: pointer; } #num{ position: absolute; bottom: 10px; left: 148px; overflow: hidden; list-style: none; } #num li{ float: left; margin:0 5px; font-size: 16px; line-height: 25px; height: 25px; width: 25px; background: #ccc; text-align: center; cursor: pointer; } #num li.select{ background-color: green; color: white; } </style> </head> <body> <div> <div> <div> <img src="https://www.jb51.net/images/meinv1.jpg" alt=""> <img src="https://www.jb51.net/images/meinv2.jpg" alt=""> <img src="https://www.jb51.net/images/meinv3.jpg" alt=""> <img src="https://www.jb51.net/images/meinv4.jpg" alt=""> <img src="https://www.jb51.net/images/meinv5.jpg" alt=""> <img src="https://www.jb51.net/images/meinv6.jpg" alt=""> </div> </div> <div></div> <div></div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script> var box=document.getElementById('box'); var con=document.getElementById('con'); var imgs=con.getElementsByTagName('img'); var btnL=document.getElementById('btnL'); var btnR=document.getElementById('btnR'); var num=document.getElementById('num'); var lis=num.getElementsByTagName('li'); var timer1=null,timer2=null; var imgw=imgs[0].clientWidth; var x=0; function imgScroll(){//图片切换 var start=box.scrollLeft; var end=imgw*x; var change=end-start; var minstep=0; var maxstep=30; var stepLength=change/maxstep; clearInterval(timer2); timer2=setInterval(function(){ minstep++; // console.log(minstep); if (minstep>=maxstep) { clearInterval(timer2); } start+=stepLength; box.scrollLeft=start; },20) for (var i = 0; i < lis.length; i++) { lis[i].className='none'; } lis[x].className='select'; } function move(){//默认向左每隔3s滚动 clearInterval(timer1); timer1=setInterval(function(){ x++; if (x>=imgs.length) { x=0; } imgScroll(); for (var i = 0; i < lis.length; i++) { lis[i].className='none'; lis[x].className='select'; } },3000); } move();//启动默认滚动函数； btnR.onclick=function(){ clearInterval(timer1); x++; if (x>=imgs.length) { x=0; } imgScroll(); move(); } btnL.onclick=function(){ clearInterval(timer1); x--; if (x<0) { x=imgs.length-1; } imgScroll(); move(); } for (var i = 0; i < lis.length; i++) { lis[i].index=i; lis[i].onclick=function(){ x=this.index; imgScroll(); move(); } } </script> </body> </html>
以上所述是小编给大家介绍的JS仿hao123导航页面图片轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: