html js轮播图原理,新手必看 Web前端工程师 JavaScript原生轮播图原理参考

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

如果符合客官胃口，点关注！后续还会呈现更多原生js特效

不懂得在下面留言，时间允许会即时回复。

详细：用js制作切换动画，js切换图片。 看运行效果需复制代码到相关文件，浏览器运行查看效果。

轮播图html、css、JavaScript源码及效果图呈上

*注 块宽度590px；块高度470px；

效果图

html文件

• 
• 
• 
• 
• 

<

>

●

●

●

●

css文件

*{ margin:0px; padding:0px; }

.Carousels{ width:590px; height:470px; margin-left:auto; margin-right:auto; border:2px solid #CCC; position:relative; overflow:hidden;}

.Carousels ul{ width:2950px; height:470px; position:absolute; left:0px; top:0px;}

.Carousels ul li{ width:590px; height:470px; display:block; float:left;}

#sigedian{ width:116px; height:25px; position:absolute; bottom:10px; left:50%; margin-left:-50px;}

#sigedian p{ width:25px; height:25px; float:left; color:#000; font-size:30px; line-height:25px; font-weight:bold; text-align:center;}

.anniu{ width:50px; height:50px; font-size:18px; margin-top:-25px; background:#FFF; line-height:50px; text-align:center;}

#lf{ position:absolute; left:0px; top:50%; z-index:10;}

#rg{ position:absolute; right:0px; top:50%; z-index:10;}

#mengban{ width:590px; height:470px; position:absolute; z-index:15; display:none;}

JavaScript文件

//蒙版

var mengban=document.getElementById('mengban');

//四个点的变化

var sigedian=document.getElementById('sigedian');

var sigedianp=sigedian.getElementsByTagName('p');

//按钮轮播

var lunbo=document.getElementById('lunbo');

var lf=document.getElementById('lf');

var rg=document.getElementById('rg');

var dmax=0;

var dqjl=0;//当前距离

var djgd=0;//第几个点

var b=0;

var liwidth=590; //li的宽度同窗口宽度

//向左运动

rg.οnclick=function (){

mengban.style.display='block';//防止连点，出现加速的bug

dmax=dmax-liwidth;//单击一次距离减590

timer=setInterval(function(){

if(dqjl > dmax){

dqjl=dqjl-10;

lunbo.style.left=dqjl+"px";

//小点变化

b=Math.abs(dmax);

djgd = b/liwidth;

for(var i=0;i

sigedianp[i].style.color='#000';

}

sigedianp[djgd].style.color='#fff';

}else{

clearInterval(timer);

dqjl=dmax; //让当前距离获得当前的距离

mengban.style.display='none';//防止连点，出现加速的bug

if(dqjl== -liwidth*4){

dmax=0;

dqjl=0;

lunbo.style.left=dqjl+"px";

}

}

},10);

}

//向右运动

lf.οnclick=function(){

mengban.style.display='block';//防止连点，出现加速的bug

if(dmax==0){

dmax=-liwidth*4;

dqjl=-liwidth*4;

lunbo.style.left=dqjl+"px";

}

dmax=dmax+liwidth;//单击一次距离加590

timer=setInterval(function(){

if(dqjl < dmax){

dqjl=dqjl+10;

lunbo.style.left=dqjl+"px";

}else{

clearInterval(timer);

dqjl=dmax; //让当前距离获得当前的距离

mengban.style.display='none';//防止连点，出现加速的bug

}

//小点变化

b=Math.abs(dmax);

djgd = b/liwidth;

for(var i=0;i

sigedianp[i].style.color='#000';

}

sigedianp[djgd].style.color='#fff';

},10);

}