本文分为上下篇为大家分享了js焦点轮播图八种经典效果,供大家参考,具体内容如下
基本布局:
- 1
- 2
- 3
- 4
- 5
--------------------------------------------------------------------------------
效果图:图略
效果图:
3.向上滚动效果:
this.className='active';
startMove(oUl,{top:-this.index*LiHeight});
}
};
}
效果图:
<div class="jb51code">
<pre class="brush:js;">
window.onload=function(){
var oBox=document.getElementById('Box');
var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');
var LiHeight=aLi_u[0].offsetHeight;
var iNow=0;//当前索引
var timer=null;//定时器
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].index=i;
aLi_o[i].onmouSEOver=function(){
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].className='';
this.className='active';
//建立关系:很重要
iNow=this.index;
startMove(oUl,{top:-this.index*LiHeight});
}
};
//开定时器
timer=setInterval(toRun,2000);
oBox.onmouSEOver=function(){
clearInterval(timer);
};
oBox.onmouSEOut=function(){
timer=setInterval(toRun,2000);
};
//定时函数
function toRun(){
if(iNow==aLi_o.length-1){
iNow=0;
}else{
iNow++;
}
for(var i=0;i<aLi_o.length;i++){
aLi_o[i].className='';
}
aLi_o[iNow].className='active';
startMove(oUl,{top:-iNow*LiHeight});
}
};
效果图: