Home>

Basic layout:

<div>
 <ul>
 <li><img src="images/1.jpg"></li>
 <li><img src="images/2.jpg"></li>
 <li><img src="images/3.jpg"></li>
 <li><img src="images/4.jpg"></li>
 <li><img src="images/5.jpg"></li>
 </ul>
 <ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </div>

Ordinary focus map

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:Picture

2. Fade in and fade out 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 picture:

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 picture:

4. Scroll up and down regularly:

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});
 }
 };
 //Enable timer
 timer=setinterval (torun, 2000);
 obox.onmouseover=function () {
 clearinterval (timer);
 };
 obox.onmouseout=function () {
 timer=setinterval (torun, 2000);
 };
 //Timed function
 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 picture:

More on the topic of carousel effects,Please click on the link below to view learning

  • Previous JavaScript package addLoadEvent method to implement multiple functions to load the page at the same time
  • Next AngularJS basic ng-mouseleave instruction