完美实现八种js焦点轮播图（上篇）
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文分为上下篇为大家分享了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});
}
};
效果图：
更多关于轮播图效果的专题，请点击下方链接查看学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO，大家继续关注更多精彩焦点轮播图。