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

前端技术 2023/09/01 JavaScript

本文分为上下篇为大家分享了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});
 }
};

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy，大家继续关注更多精彩焦点轮播图。

本文地址：https://www.stayed.cn/item/2111

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案