完美实现八种js焦点轮播图上篇

本文分为上下篇为大家分享了js焦点轮播图八种经典效果，供大家参考，具体内容如下

基本布局：

rush:xhtml;">

Box">

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

--------------------------------------------------------------------------------

1.普通焦点图

rush:js;"> window.onload=function(){ var oUl=document.getElementById('ul'); var aLi_u=oUl.getElementsByTagName('li'); var oOl=document.getElementById('ol'); var aLi_o=oOl.getElementsByTagName('li'); for(var i=0;iSEOver=function(){ for(var i=0;idisplay='none'; } this.className='active'; // console.log(aLi_o[this.index]); aLi_u[this.index].style.display='block'; } } }

效果图：图略

2.淡入淡出效果

rush:js;"> var oUl=document.getElementById('ul'); var aLi_u=oUl.getElementsByTagName('li'); var oOl=document.getElementById('ol'); var aLi_o=oOl.getElementsByTagName('li');

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='';
aLi_u[i].style.display='none';
aLi_u[i].style.filter='alpha(opacity=0)';
aLi_u[i].style.opacity=0;
}
this.className='active';
aLi_u[this.index].style.display='block';
startMove(aLi_u[this.index],{opacity:100});
};
}

效果图：

3.向上滚动效果：

rush:js;"> 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;

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

startMove(oUl,{top:-this.index*LiHeight});
}
};
}

效果图：

4.定时上下滚动：

<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';
//建立关系：很重要
i<a href="https://www.jb51.cc/tag/Now/" target="_blank" class="keywords">Now</a>=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});
}
};