JS --- Case: Carousel

Case: Carousel

Page load time results appear, script written label inside the head, body above

A spread image display animation, after traversal, each of the animated picture function package moves to the specified destination (simultaneously change multiple properties: width, transparency, hierarchical, top, left)

In doing about button click event.

Button on the right, and push an array inside the shift, the first array is added to the last position removed

The left button, unshift last pop to first

Soon, when clicked, there will be chaos (a function not execute the next completed a full packed together) so the addition of a lock flag, to ensure that the next function is finished just be a function

Were added to the picture spread, the left button, the right button three events inside.

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css(1).css" />
  <script src="common.js"></script>
  <script>
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      }, 
      { 
        Width: 600 , 
        Top: 70 , 
        left: 600 , 
        Opacity: 0.8 , 
        the zIndex: . 3 
      }, 
      { 
        width: 400 , 
        Top: 20 is , 
        left: 750 , 
        Opacity: 0.2 , 
        the zIndex: 2 
      } 
    ]; 


    // page loading event 
    the window.onload =  function () {
       var in Flag =  to true ; // assume all of the animation is finished --- lock =================================== == 
      var List = My $ ( " Slide " ) .getElementsByTagName ( " Li " ); 

      // image spread 
      function ASSIGN () {
         for ( var I =  0 ; I < List.length; I ++ ) {
           // Li each set, with animate function package, the width, level, transparency, left, top to the target position established 
          animate (List [I], config [I], function () { 
            in Flag =  to true ; //================================================== ============ 
          }) 
        } 
      }; 
      ASSIGN (); 

      // the right button 
      My $ ( " arrRight " ) .onclick =  function () {
         IF (In Flag) { // ==== ================================================== =============== 
          In Flag =  to false ; 
          config.push (config.shift ()); 
          aSSIGN (); // redistribution 
        } 
      }; 

      // left button 
      My $ ( " arrLeft " ) .onclick=  Function () {
         IF (In Flag) { 
          In Flag =  to false ; 
          config.unshift (config.pop ()); 
          ASSIGN (); 
        } 
      }; 

      // mouse enters, about div focus display 
      My $ ( " Slide " ). the onmouseover =  function () { 
        Animate (My $ ( " arrow arrow " ), { " Opacity " : . 1 }); 
      }; 

      // mouse, right and left focus div Hide 
      My $ ( " Slide " ) .onmouseout= function () {
        animate(my$("arrow"), { "opacity": 0 });
      };
    };

  </script>

</head>

<body>
  <div class="wrap" id="wrap">
    <div class="slide" id="slide">
      <ul>
        <li><a href="#"><img src="images/slidepic1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic5.jpg" alt="" /></a></li>
      </ul>
      <div class="arrow" id="arrow">
        <a href="javascript:;" class="prev" id="arrLeft"></a>
        <a href="javascript:;" class="next" id="arrRight"></a>
      </div>
    </div>
  </div>

</body>

</html>

JS --- Case: Carousel

Case: Carousel

Guess you like