JS Imitation Millet official website Picture Carousel Special effects _javascript Skills

Millet official website gives me the feeling is the atmosphere, clean. The addition of many special effects makes people feel refreshing and big. See their home page of the Carousel map implementation is very interesting, so they imitate write a.

The general feeling came out, put a picture first:

Through the front-end artifact Chrom F12 observation Millet official website HTML code, it is not difficult to see them using 5 div wrapped pictures and use the positioning through the Z-index to control div hierarchy, The element is displayed and hidden by controlling the opacity and display properties of each div.

The screenshot below (the Opacity property in the red box):

OK, the means of implementation know, then the page layout first out.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

Structure already has the following is added JS let it move.

JS in the page:

Window.onload = function () {var oleft = document.getElementById ("left");

    var oright = document.getElementById ("right");
    var owarp = document.getElementById ("Imgwarp");
    var aimg = owarp.getelementsbytagname ("img"); 
    var aEm = document.getElementsByTagName ("em");
    var i = 5;
    BTN = true;
     Oleft.onclick = function () {clearinterval (Autotimer);
      if (BTN) {btn=false;
     Fnautoleft ();
    }
    };
     function Fnautoleft () {var a = i% 5;
     I-=1; 
     var b = i% 5;
     Startopacmove (aimg[a],0,aimg[b],100);
    SetStyle (b);
      } Oright.onclick = function () {if (BTN) {//per unit time can trigger only one element's display hidden clearinterval (autotimer);
      Btn=false;
      Fnautoright ();
    }
    };
    var count = 0;
     function Fnautoright () {var a = i% 5;
     I+=1;
     
     var b = i% 5; 
     Startopacmove (aimg[a],0,aimg[b],100);
     SetStyle (b);

      if (i==10) {i=5;
  for (var j = 0;j<aimg.length;j++) {if (j==0) {      Aimg[0].style.csstext = "OPACITY:1; Z-index:5;
       Display:block; ";}
 
    else{aimg[j].style.csstext = "opacity:0; z-index:0; display:none;";}}}
    
    var Autotimer = setinterval (fnautoright,5000);
     function SetStyle (a) {for (Var i=0;i<aem.length;i++) {aem[i].classname= ";
    } aem[a].classname= "Active";
 }
   }

Moving JS:

function Startopacmove (obj1,tag1,obj2,tag2) {var iCur1 = 0; 
  var iCur2 = 0;
  var itimer = null;
  var iSpeed1 =-2;
  var iSpeed2 = 2; 
  Clearinterval (Itimer);

   Itimer = setinterval (function () {var ibtn = true;
   ICur1 = CSS (obj1, ' opacity ') *100;
   ICUR2 = CSS (obj2, ' opacity ') *100;
   ICur1 = Math.floor (ICUR1); 

   ICUR2 = Math.floor (ICUR2);
    
    if (iCur1!= tag1 && iCur2!= tag2) {ibtn = false;
    Obj1.style.opacity = (icur1+ispeed1)/100;
    Console.log ("Transparency value when hiding elements:" + (ICUR1+ISPEED1)/100);
    Obj1.style.filter = ' alpha (opacity= ' + (icur1+ispeed1) + ') ';
    
    Obj1.style.zIndex = 0;
    Obj2.style.opacity = (icur2+ispeed2)/100;
    Obj2.style.filter = ' alpha (opacity= ' + (ICUR2+ISPEED2) + ') ';
    Obj2.style.zIndex = 5;
   Obj2.style.display = "block";
    } if (ibtn) {clearinterval (Itimer);
    Obj1.style.display = "None";
    obj1.style.opacity = 0; 
    obj2.style.opacity = 1;
   BTN = true;
}},10); } function css (obj,attr) {if obj.curRentstyle) {//current browser exists Currentstyle property return obj.currentstyle[attr];
 }else{return getComputedStyle (Obj,false) [attr]; 
 }
}

See how the JS code makes the picture move.

Think of a question: how the screen switches to the left and right, and what is necessary to complete this step. Let's say the first picture that is currently displayed, and the first picture when you switch to the right, shows the second picture, so what needs to be done is to let the index 0 of the picture hidden, index 1 of the picture display, again click the right button index to 1 of the picture Hidden index of 2 of the picture display, followed by the case, and so on, need to get the index of 0, 1,2,3,4. The final note on the right side of the boundary problem is OK.

OK, put the code:

var i = 5; 
function Fnautoright () {
  var a = i% 5;
  I+=1;
  var b = i% 5;
}

With the variable I to 5, the value is 0-4, just the result we want, corresponding A, B is also just want to hide, display the index of the picture. Then call the written movement JS, below the display of the current picture position function, then right this piece of OK.

The picture moves to the left, down we need to hide what the displayed image index is, assuming that the current is the first picture click to the left, the hidden picture index is 0, the picture index is 4, and then click the hidden Index of 4 to show 3. Obviously, the indexes we need are 0, 4, 3, 2, 1.

The code is as follows:

var i=5;
function Fnautoleft () {
  var a = i% 5;
  I-=1;
  var b = i% 5; 
}

The same is i=5, and then to 5, get the A for the current need to hide the image index, let I minus one more than 5 to get the need to display the picture index. So the left problem is solved.

In the last section, write a setinterval function, and then set an interval call time, complete the function of AutoPlay.

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.