The simple example _javascript skill of the native JS to realize the picture carousel and fade in effect

The recent interest in CSS does not lift up, because before the picture carousel has been plagued by the lack of precision, so, spent a little time familiar with JS. Then a way to the black, with jquery and JS write a carousel and picture fade effect. After learning the road is very long, hope oneself in front of the road farther and farther ' (∩_∩)

In principle, there are many tutorials on the web, simply.　　

Fade in, in fact, here only use the effect of fade in. Every picture that fades in, we set its display to block, the other is none, so there is only one picture that actually exists and occupies a position in the document stream. Before setting the display mode of a picture, the transparency of the picture is gradually increased, which gives the impression of fading in.

In fact, in the JS code, there is a key point, the code used to the closure, so the closure has a little understanding. Let's say a few more words here:

Closure's official explanation is that a closure is an expression (usually a function) that has many variables and an environment that binds them, and therefore these variables are also part of the expression.

The simpler version is:

A closure is created when the internal function B of function A is referenced by a variable outside function a.

Speak a little more thoroughly. A "closure" is a method function in the constructor body that defines another function as the target object, and the method function of the object in turn refers to the temporary variable in the outer function body. This makes it possible to indirectly maintain the value of the temporary variables used by the original constructor body as long as the target object retains its method throughout its lifetime.

Although the first constructor call has ended, the name of the temporary variable disappears, but the value of the variable is always referenced within the target object's method, and the value can only be accessed through this method. Even if you call the same constructor again, but only new objects and methods are generated, the new temporary variable only corresponds to the new value, and the last time the call was separate.

The following function is a closed-pack function. Why do you use closures? normal function not OK? It's really not the case. The function of the closure here is to keep a reference to the flag. If you don't have to close the bag, for a local variable, as long as the function executes once, that is, the flag executes once, the local variable is reclaimed by the garbage collection mechanism, and we refer to the flag variable through the function in the intermittent call, and flag loses its value the second time it is executed. The function body cannot perform the correct result. In the beginning of contact with the front end, feel that closures are dispensable, the fact is, this thing is really important!

var setval = function (s, flag)
    {return
      function ()
      {
        pos = Math.Abs (parseint (Pic.style[point)));
        if (Flag > 0) {   //The current point is greater than the target point coordinates, the screen moves to the right, and the left value is reduced
          Pic.style[point] =-math.floor (parseint (s*ssinglesize)- POS) + *speed) + ' px ';
        }
        if (Flag < 0) {
          pic.style[point] =-math.ceil (pos+ (parseint (s*ssinglesize)-POS) *speed) + ' px ';
        }
        if (pos = = (Ssinglesize * s))
        {Now
          = s
          ; Clearinterval (interval);
        }
      }
    ;

Here's the code:

Html

<! DOCTYPE html>  

CSS

body {font-size:12px;
  UL, Li {padding:0;
  margin:0; 
List-style:none; 
  } #picBox {width:610px; 
  height:205px; 
  margin:50px Auto; 
  Overflow:hidden;
  position:relative;
font-size:0;
  }/* Carousel picture/#picBox. show_pic {width:3050px;
Position:absolute; 
  #picBox. show_pic li {float:left; 
  width:610px;
  height:205px;
  Display:none;
/*display:none;
  */} #picBox. show_pic li.on {display:block} #picBox. show_pic li img {display:block;
  width:610px;
height:205px;
  } #picBox. icon_num {position:absolute; 
  bottom:12px;
  right:10px;

Z-index:10; 
  #picBox. icon_num li {float:left;
  /*background:url (/uploadfile/200912/28/fa15567738.gif) no-repeat-15px 0; 
  * * WIDTH:16PX;
  height:16px; 
  font-size:16px; 
  Color: #39F; 
  Text-align:center; 
  Cursor:pointer;
margin-right:5px;
  #picBox. Icon_num Li.on {background: #000; 
opacity:0.5;
  /* Background */bg {z-index:1;
  Position:absolute; bottom:0;
  height:40px;
  width:610px;
  Background: #000;
  opacity:0.6;
Filter:alpha (opacity = 60);
  } #picBox. show_des {width:300px;
  height:18px;
  Position:absolute;
  bottom:11px;
  left:15px;
  Color: #fff;
Z-index:10;
  #picBox. show_des li {display:none;
  line-height:18px;
font-size:18px;
 } #picBox. show_des li.on {Display:block}

JS

function Cleanwhitespace (oeelement) {for (Var i=0;i<oeelement.childnodes.length;i++) {var node=oeelement.c
      Hildnodes[i];
      if (node.nodetype==3 &&!/\s/.test (node.nodevalue)) {Node.parentNode.removeChild (node);    (}}}///Carousel Code this.layerglide=function (auto,obox,ssinglesize,second,fspeed,point) {var interval,timeout;           Two timer var pos;    The absolute value of the current positioning coordinate reshaping is var time = second and now = 0;  Time picture moves once interval, now the index value of the current picture var speed = fspeed//move speed var delay = second * 1000;
    Each time the picture is switched on the interval var picbox = document.getElementById (Obox);
    Cleanwhitespace (Picbox); var pic = picbox.childnodes[0]; Picture list var des = picbox.childnodes[2].getelementsbytagname ("Li");
    Picture list var con = picbox.childnodes[3].getelementsbytagname ("Li");
    var sum = con.length;
        var setval = function (s, flag) {return function () {pos = Math.Abs (parseint (Pic.style[point))); if (Flag &GT 0) {//The current point is greater than the target point coordinates, the screen moves to the right, the left value decreases Pic.style[point] =-math.floor (pos+ (parseint (s*ssinglesize)-POS) *speed) + ' px '
        ;
        } if (flag < 0) {Pic.style[point] =-math.ceil (pos+ (parseint (s*ssinglesize)-POS) *speed) + ' px ';
          } if (pos = = (Ssinglesize * s)) {now = s;
        Clearinterval (interval);
    }
      }
    };
        var changeto = function (num) {for (var i=0; i<sum; i++) {con[i].classname = ""; 
      Des[i].classname = "";
      };
      Con[num].classname = "on";
      Des[num].classname = "on";
      var flag = Math.Abs (parseint (pic.style[point))-ssinglesize * NUM;
      Interval = setinterval (setval (NUM, flag), time);
    Bkg.hide (). FadeIn ();
      function Autoglide () {cleartimeout (interval); Now = (now = = (parseint (sum)-1))?
      0: (now + 1);
      Changeto (now);
    Timeout = settimeout (autoglide,delay);
   function Isauto () {if (auto) {     Timeout = settimeout (autoglide,delay);
    };  } isauto (); Start Auto-Carousel for (var i=0; i<sum; i++)//navigation button {Con[i].onmouseover = (function (i) {return func
          tion () {cleartimeout (timeout);
          Clearinterval (interval);
          Changeto (i);
        This.onmouseout=isauto (); }} (i)}//Fade this.layerfader=function (auto, Obox, second, count, speed) {var interval,timeout    ;    Two timer var now = 0;  Time picture moves once interval, now the index value of current picture is var delay = second * 1000;
    Each time the picture is switched on the interval var picbox = document.getElementById (Obox);
    Cleanwhitespace (Picbox);
    var pic = picbox.childnodes[0].getelementsbytagname ("Li"); 
    var des = picbox.childnodes[2].getelementsbytagname ("Li");
    var con = picbox.childnodes[3].getelementsbytagname ("Li");

    var sum = con.length;  function FadeIn (elem) {setopacity (elem,0);//initial fully transparent for (var i = 0;i<=count;i++) {//Transparency Change 20 * 5 = 100 
        (function (i) {var level = i * 5;//transparency per change value settimeout (function () { 
         SetOpacity (Elem, level)},i*speed);   
      }) (i); } function SetOpacity (Elem, level) {//Set transparency if (elem.filters) {elem.style.filter = "alpha" (O
      Pacity= "+ level +");
      else {elem.style.opacity = level/100;
        } var changeto = function (num) {for (var i=0; i<sum; i++) {con[i].classname = ""; 
        Des[i].classname = "";
      Pic[i].classname = "";
      };
      FadeIn (Pic[num]);
      Con[num].classname = "on";
      Des[num].classname = "on";
      Pic[num].classname = "on";
    Bkg.hide (). FadeIn ();
      function Autoglide () {cleartimeout (interval); Now = (now = = (parseint (sum)-1))?
      0: (now + 1);
      Changeto (now);
    Timeout = settimeout (autoglide,delay); function Isauto () {if (auto) {Timeout = settimeout (Autoglide,delay);
    };  } isauto (); Start Auto-Carousel for (var i=0; i<sum; i++)//navigation button {Con[i].onmouseover = (function (i) {return func
          tion () {cleartimeout (timeout);
          Clearinterval (interval);
          Changeto (i);
        This.onmouseout=isauto ();
 }}) (i)}}

jquery compared to JS is a lot simpler, here is not to repeat. A junior high school design mode class, the teacher told us for the interface and not for implementation programming, the code as far as possible not to appear constant, improve the reuse of code, so write code, the variable factors are mentioned in the parameters. The last sentence, for JS Dom operation, JS native is kingly, more practice, can master the good, hope that the farther away.

The above native JS to achieve the picture carousel and fade in the effect of a simple example is a small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.