hao123html转换js,JS仿hao123导航页面图片轮播效果

hao123网站大家都很熟悉吧，具体的效果不用我多说吧，感兴趣的朋友可以去参考效果图，下面小编给大家分享下实现代码思路，当然大家可以根据需求适当的添加修改删除代码。

关键代码如下所示：

图片轮播

.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;

}

• 1
• 2
• 3
• 4
• 5
• 6

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.οnclick=function(){

clearInterval(timer1);

x++;

if (x>=imgs.length) {

x=0;

}

imgScroll();

move();

}

btnL.οnclick=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].οnclick=function(){

x=this.index;

imgScroll();

move();

}

}

以上所述是小编给大家介绍的JS仿hao123导航页面图片轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！