Original JS and jquery to achieve the image of the _jquery of the wheel-seeding fade effect

There are many ways to do a picture carousel, which uses the Fade form

JS native and jquery can be implemented, jquery because of the encapsulation of a lot of usage, so use up a lot simpler, converted to JS use, in fact, that is, using JS native simulation of these uses.

But in any case, it is necessary to construct a basic layer of presentation.

A simple picture carousel is generally composed of several parts.

For fade-in

1. First is a peripheral part (in fact, the outermost overall wrapper)

2. Next is where you set up the picture carousel (i.e. a banner bar)

3. Then there is a group of pictures (you can use the new div or the Ul-->li form directly)

4. Then a transparent background layer, placed at the bottom of the picture

5. Then a picture description info layer, placed in the lower left corner of the transparent background (div or ul-->li)

6. Then is a button layer, used to locate the image Group Index bar, placed in the transparent background of the lower right corner (div or Ul-->li)

7. Of course, sometimes also at the end of the picture at the end of two arrows < and >, indicating the image of the carousel direction (here first, if you want to use the same)

Thus, you can construct the HTML structure first

<div class= "wrapper" ><!--outermost section--> <div class= "banner" ><!--Carousel section--> <ul class= "img  List "><!--picture section--> <li class=" Imgon "><a href=" # "></a></li> <li><a href= "#" ></a></li> <li><a href=" # "></a></li> <li><a href = "#" ></a></li> Li><a href= "#" ></a ></li> </ul> <div class= "BG" ></div> <!--picture bottom background layer part--> <ul class= "inf Olist "><!--picture in the lower left corner of the text Information section--> <li class= "Infoon" >puss in boots1</li> <li>puss in boots2</li>
      >puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li>
        </ul> <ul class= "indexlist" ><!--picture in the lower right corner ordinal part--> <li class= "Indexon" >1</li>
      <li>2</li> <li>3</li> <li>4</li> <li>5</li>
 </ul> </div> </div>

The alt description of the picture part is the information content of the infolist part, sometimes it can be tied down. Note that the width and height of the picture in the Imglist are set at the end, and it will be slower if the unification is set in the CSS.

The corresponding on class that I added to the three-part active may not need so many active

Next, set the CSS style for it.

 <style type= "Text/css" > body,div,ul,li,a,img{margin:0;padding:0;}
  Ul,li{list-style:none;}
  A{text-decoration:none;}
  . wrapper{position:relative;margin:30px auto;width:400px;height:200px;}
  . Banner{width:400px;height:200px;overflow:hidden;}
  . Imglist{width:400px;height:200px;z-index:10;}
  . Imglist Li{display:none;}
  . imglist. Imgon{display:inline; . Bg{position:absolute;bottom:0;width:400px;height:40px;z-index:20;opacity:0.4;filter:alpha (OPACITY=40);
  Background:black;}
  . infolist{position:absolute;left:10px;bottom:10px;z-index:30;}
  . Infolist Li{display:none;}
  . infolist. Infoon{display:inline;color:white;
  . indexlist{position:absolute;right:10px;bottom:5px;z-index:30;}
  . indexlist li{float:left;margin-right:5px;padding:2px 4px;border:2px solid black;background:grey;cursor:pointer; . indexlist. Indexon{background:red;font-weight:bold;color:white} </style> 

Explain:

1, banner that is the scope of the picture carousel, set here for the width of 400 high 200, the image of the UL periphery also set.

2, to display the active items, so first unify all Li set Display:none, and then add an on class setting display:inline

3, because when using jquery Fadein (), is the change for Display:list-item, so to add Overflow:hidden in banner there, otherwise, if quickly switch pictures, the overall picture height will exceed the given height.

4, pay attention to each part to add Z-index value, to prevent the coverage can not show the phenomenon

Write here, first check whether the page has correctly displayed the first item. If it has been shown, add the JS Processing section.

One, jquery way

1. There is a current picture corresponding to the label curindex = 0;

2. The default will automatically carousel, so the default to add

var autochange = setinterval (function () { 
    if (Curindex < $ (". Imglist li"). length-1) { 
      curindex + +; 
    } else{ 
      curindex = 0;
    }
    Call transformation processing function
    Changeto (curindex); 
  },2500);

Default Curindex, then reset to 0

3. where Changeto () function switching

function Changeto (num) { 
    $ (". Imglist"). Find ("Li"). Removeclass ("Imgon"). Hide (). EQ (num) fadeIn (). addclass (" Imgon ");
    $ (". Infolist"). Find ("Li"). Removeclass ("Infoon")-eq (num). addclass ("Infoon");
    $ (". Indexlist"). Find ("Li"). Removeclass ("Indexon"). EQ (num). addclass ("Indexon");
  

Let's see what I can do.

4. Then when the mouse slide into the lower right corner of the subscript also to deal with

  $ (". Indexlist"). Find (' Li '). each (function (item) { 
    $ (this). Hover (function () { 
      clearinterval (autochange);
      Changeto (item);
      Curindex = Item;
    },function () { 
      autochange = setinterval (function () { 
        if (Curindex < $ (". Imglist li"). length-1) { 
          curindex + +; 
        } else{ 
          curindex = 0;
        }
        Call transformation processing function
        Changeto (curindex); 
      },2500);
    });
  

Slide into the purge timer and perform a picture switching process. Then set Curindex to the current item (this should be careful not to forget)

Slide out the reset timer and restore the default state

In this way, fade in and out is done.

Complete code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Second, JS native mode

The native way is basically a simulation of jquery.

Because I use a lot of class, so I want to add some class processing function (can use ID, should be more convenient)

Tag elements by class name (note, because now I only have a class for the tag, multiple classes should be wrong)

  Gets node
  function getelementsbyclassname (className) { 
    var classarr = [] through class;
    var tags = document.getelementsbytagname (' * ');
    For (var item in tags) { 
      if (Tags[item].nodetype = 1) { 
        if (Tags[item].getattribute (' class ') = = ClassName) { 
          Classarr.push (Tags[item]);
    }} return Classarr; Return
  }

Simulation of JQ AddClass and Removeclass

  To determine if obj has this class
  function Hasclass (obj,cls) {  //class is located at the word boundary return
    Obj.className.match (the new RegExp (\ s|^) ' + CLS + ' (\\s|$) ');
   }
   Add Class
  function addclass (obj,cls) { 
    if!this.hasclass (obj,cls)) { 
       Obj.classname + = cls
  to obj}
  //Remove class
  function Removeclass (obj,cls) { 
    if (hasclass (obj,cls)) { 
      var reg = new RegExp (\ \s|^) ' + CLS + ' (\\s|$) ');
         Obj.classname = Obj.className.replace (Reg, ');
    }
  }

Re-simulating the Fadein and fadeout functions of JQ

  Fade functions function
  fadeIn (elem) { 
    setopacity (elem,0);//initial fully transparent for
    (var i = 0;i<=20;i++) {//Transparency Change 20 * 5 = 100
      (function () { 
        var level = i * 5;  Transparency per change value
        settimeout (function () { 
          setopacity (Elem, level)
        },i*25);//i * 25 is the time interval for each change of transparency, set itself
      }) (i);     Change once per cycle
    }

    //Fade handler function
  fadeout (elem) {for 
    (var i = 0;i<=20;i++) {//Transparency Change 20 * 5 = (
      function () { 
        var level = 100-i * 5;//transparency per change value
        settimeout (function () { 
          setopacity (Elem, level)
        },i*25); I * 25 for each change in the transparency of the time interval, set the Self
      }) (i);     Change once per cycle
    }
  }

Where you set the transparency function as a form of processing

    Set Transparency
  function setopacity (elem,level) { 
    if (elem.filters) { 
      elem.style.filter = ' alpha (opacity= ' + level+ ")";
    } else{ 
      elem.style.opacity = level/100
    }
  }

And then there's the basic part of the usage.

Initialize frequently used variables and automatic switching of pictures

    var curindex = 0,//Current index
      Imgarr = Getelementsbyclassname ("imglist") [0].getelementsbytagname ("Li"),//Get Picture Group
      Imglen = imgarr.length,
      Infoarr = Getelementsbyclassname ("infolist") [0].getelementsbytagname ("Li"),// Get Picture Info Group
      Indexarr = Getelementsbyclassname ("indexlist") [0].getelementsbytagname ("Li");//Get Control of index group
     // Timer Automatic transform 2.5 seconds per
  var autochange = setinterval (function () { 
    if (Curindex < imgLen-1) { 
      curindex + +; 
    } else{ 
      curindex = 0;
    }
    Call transformation processing function
    Changeto (curindex); 
  },2500)
  ; Invoke Add event handling
  addevent ();    

The Changeto is the processing function, addevent is to the lower right corner of those buttons to set event handling

Transform processing functions function Changeto (num) {//set image var curimg = getelementsbyclassname ("Imgon") [0]; Fadeout (CURIMG);
    Fade out the current image removeclass (curimg, "Imgon");
    AddClass (Imgarr[num], "Imgon"); FadeIn (Imgarr[num]);
    Fade in Target image//Set image info var curinfo = getelementsbyclassname ("Infoon") [0];
    Removeclass (Curinfo, "Infoon");
    AddClass (Infoarr[num], "Infoon");
    Set Image control Subscript index var _curindex = getelementsbyclassname ("Indexon") [0];
    Removeclass (_curindex, "Indexon");
  AddClass (Indexarr[num], "Indexon"); ///to the lower right corner of the picture index add event handling function addevent () {for (Var i=0;i 

In this way, the original version is also completed

Complete code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above is the entire contents of this article, I hope you can enjoy.