注:基于完美运动框架move2.js而完成的八种焦点录播图
基本布局:
<div id="box">
<ul id="ul">
<li style='display:block;'><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
<ol id='ol'>
<li class='active'>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
1.普通焦点图
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;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';
}
this.className='active';
// console.log(aLi_o[this.index]);
aLi_u[this.index].style.display='block';
}
}
}
效果图:图略
2.淡入淡出效果
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.向上滚动效果:
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.定时上下滚动:
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});
}
};
(未完待续…)