JS仿hao123导航页面图片轮播效果
hao123网站大家都很熟悉吧，具体的效果不用我多说吧，感兴趣的朋友可以去参考效果图，下面小编给大家分享下实现代码思路，当然大家可以根据需求适当的添加修改删除代码。
关键代码如下所示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>图片轮播</title>
<style>
.warp{
width:600px;
height:750px;
position:relative;
margin:30pxauto0;
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;
}
#conimg{
float:left;
width:600px;
height:750px;
}
#btnL{
position:absolute;
left:0px;
top:366px;
width:36px;
height:36px;
background:url(images/btnL.png)00no-repeat;
cursor:pointer;
}
#btnR{
position:absolute;
right:0px;
top:366px;
width:36px;
height:36px;
background:url(images/btnR.png)00no-repeat;
cursor:pointer;
}
#num{
position:absolute;
bottom:10px;
left:148px;
overflow:hidden;
list-style:none;
}
#numli{
float:left;
margin:05px;
font-size:16px;
line-height:25px;
height:25px;
width:25px;
background:#ccc;
text-align:center;
cursor:pointer;
}
#numli.select{
background-color:green;
color:white;
}
</style>
</head>
<body>
<divclass="warp">
<divid="box">
<divid="con">
<imgsrc="images/meinv1.jpg"alt="">
<imgsrc="images/meinv2.jpg"alt="">
<imgsrc="images/meinv3.jpg"alt="">
<imgsrc="images/meinv4.jpg"alt="">
<imgsrc="images/meinv5.jpg"alt="">
<imgsrc="images/meinv6.jpg"alt="">
</div>
</div>
<divid="btnL"></div>
<divid="btnR"></div>
<ulid="num">
<liclass="select">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
varbox=document.getElementById('box');
varcon=document.getElementById('con');
varimgs=con.getElementsByTagName('img');
varbtnL=document.getElementById('btnL');
varbtnR=document.getElementById('btnR');
varnum=document.getElementById('num');
varlis=num.getElementsByTagName('li');
vartimer1=null,timer2=null;
varimgw=imgs[0].clientWidth;
varx=0;
functionimgScroll(){//图片切换
varstart=box.scrollLeft;
varend=imgw*x;
varchange=end-start;
varminstep=0;
varmaxstep=30;
varstepLength=change/maxstep;
clearInterval(timer2);
timer2=setInterval(function(){
minstep++;
//console.log(minstep);
if(minstep>=maxstep){
clearInterval(timer2);
}
start+=stepLength;
box.scrollLeft=start;
},20)
for(vari=0;i<lis.length;i++){
lis[i].className='none';
}
lis[x].className='select';
}
functionmove(){//默认向左每隔3s滚动
clearInterval(timer1);
timer1=setInterval(function(){
x++;
if(x>=imgs.length){
x=0;
}
imgScroll();
for(vari=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(vari=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
x=this.index;
imgScroll();
move();
}
}
</script>
</body>
</html>
以上所述是小编给大家介绍的JS仿hao123导航页面图片轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！