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

网络编程 2024/11/15 佚名

3 2 1

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

基本布局：

<div id="box">
 <ul id="ul">
 <li style='display:block;'><img src="/UploadFiles/2021-04-02/1.jpg">

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});
 }
};



效果图：

更多关于轮播图效果的专题，请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持，大家继续关注更多精彩焦点轮播图。