Perfect realization of eight kinds of JS Focus carousel (above) _javascript skills

This article is divided into the upper and lower parts for everyone to share the JS focus of eight kinds of classic results, for your reference, the specific contents are as follows

Basic layout:

<div id= "box" >
 <ul id= "ul" >
  <li style= ' Display:block; ' ></li> <li></li
  >
  <li></li> <li></li>
  <li></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. General Focus Chart

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

Effect Picture: Tullo

2. Fade effect

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

Effect Chart:

3. Scroll up effect:

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

Effect Chart:

4. Rolling up and down periodically:

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;//current index var timer=null;//timer 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 ';

    Establish a relationship: very important inow=this.index;
   Startmove (Oul,{top:-this.index*liheight});
 }
  };

 Open Timer timer=setinterval (torun,2000);
 Obox.onmouseover=function () {clearinterval (timer);
 };
 Obox.onmouseout=function () {timer=setinterval (torun,2000);
 };
  Timing 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});

}
}; 

Effect Chart:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud Habitat community, we continue to pay attention to more exciting focus of the rotation map.