The native JS realizes the _javascript technique of the picture Cascade Carousel Switching effect

This article introduces the JS focus picture Cascade Carousel Switch Scrolling effect, share for everyone to reference, the specific content as follows

Effect Chart:

Function Description:

• 　　custom picture size;
• Automatically scrolls the picture every once in a while;
• Change the position of the picture every time the animation is performed, and the height and other attributes will follow the change;
• Move the mouse over the picture to display the details of the current picture;
• Click on the button to roll forward backward;
  

Detailed code:
HTML code:

<!
DOCTYPE html> <!--saved from Url= (0062) http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html-->  　 

JS Code:

Define (function (Require, exports, module) {' Use strict ';

 var $ = require (' lib/jquery/1.11.x/index.js ');
   var carousel = {_initdata:false,//judge whether the animation is finished init:function (options) {var t = this;
   T._wapper = Options.wapper;
   T._grids = t._wapper.find (' li ');
   T._gridswidth = Options.imgwidth; 
   T._gridsheight = Options.imgheight;

   t._spacing = options.spacing; Take center picture t._middle = t._grids.length% 2 = 0?

   T._GRIDS.LENGTH/2: parseint (T._GRIDS.LENGTH/2); Store each picture parameter T._arr = {left: [], Top: [], ZIndex: [], Width: [], Height: []} if (!t._initdat
    A) {var interval;
    Interval = setinterval (function () {$ ('. Previous '). Click ();
   },10000);
   } t._largerimages ();
   T._reposition ();

   T._mouseenter (t._grids)//mouse move up to show host nickname},//Initialize positioning: _largerimages:function () {var t = this;
   var front = T._middle;
   var avtive = T._middle;

   var last = T._grids.length;
  T._grids.each (function (i, IMG) {  
    if (i = = T._middle) {t._grids.eq (i). css ({zindex:99, top:0, Left:t._spacing.left * I, 

    Height:t._gridsheight, width:t._gridswidth}); else if (I < T._middle) {T._grids.eq (i). css ({zindex:i, top:t._spacing.top * Front, left : T._spacing.left * I, Height:t._gridsheight-t._spacing.height * front, WIDTH:T._GRIDSWIDTH-T._SPACING.W
     
     Idth * Front});

    front--;

     } else {last-; T._grids.eq (last). css ({zindex:i, top:t._spacing.top * avtive, Left:t._spacing.left * last + T._spac Ing.width * avtive, Height:t._gridsheight-t._spacing.height * avtive, Width:t._gridswidth-t._spacing.wid

     th * avtive});
    Avtive--;
   };
  });

   },//Page animation _reposition:function () {var t = this;
    The values of the attributes are passed to the array T._grids.each (function (i,img) {T._arr.left.push (T._grids.eq (i) position (). left); T._arr.top.push (t._Grids.eq (i). Position (). top);
    T._arr.width.push (T._grids.eq (i). width ());
    T._arr.height.push (T._grids.eq (i). height ());
   T._arr.zindex.push (T._grids.eq (i). CSS (' Z-index '));

   }); Page forward $ ('. Previous '). Bind (' click ', function () {if (!t._initdata && t._arr.left.length!= 0) {t._in

     Itdata = true; 
     
     Retrieve selector var grids = t._wapper.find (' li '); for (var i = 1; i < grids.length i + +) {Grids.eq (i). Animate ({zindex:t._arr.zindex[i-1), lef T:t._arr.left[i-1], top:t._arr.top[i-1], width:t._arr.width[i-1], height:t._arr.height[i
       -1],},200, function () {t._initdata = false;
       Grids.find (' i '). addclass (' cover ');
      Grids.eq (T._middle + 1). Find (' i '). Removeclass (' cover ');
     });

     };  Grids.eq (0). Animate ({left:t._arr.left[grids.length-1], top:t._arr.top[grids.length-1], Width: t._arr.width[Grids.length-1], HEIght:t._arr.height[grids.length-1], zindex:t._arr.zindex[grids.length-1]},200, function () {$
     (this). Appendto (T._wapper);

    });
   }
   }); Page back $ ('. Next '). Bind (' click ', function () {if (!t._initdata && t._arr.left.length!= 0) {T._INITDA

     Ta = true; 
     
     Retrieve selector var grids = t._wapper.find (' li ');  for (var i = 0; i < grids.length-1 i + +) {Grids.eq (i)-Animate ({left:t._arr.left[i + 1], top: T._arr.top[i + 1], Width:t._arr.width[i + 1], Height:t._arr.height[i + 1], Zindex:t._arr.zin
       Dex[i + 1]},200,function () {t._initdata = false;
     });
     };  
      Grids.eq (grids.length-1). Animate ({left:t._arr.left[0], top:t._arr.top[0], width:t._arr.width[0], Height:t._arr.height[0], zindex:t._arr.zindex[0]},200, function () {$ (this). Prependto (T._w
      Apper); Grids.find (' i '). AddClass (' cover');
     Grids.eq (t._middle-1). Find (' i '). Removeclass (' cover ');

    });
  }
   }); ///mouse enters picture effect _mouseenter:function (grids) {Grids.each (function (i) {$ (this). MouseEnter (function () {$ (thi
    s). Find ('. Tab_name '). Animate ({bottom:0,opacity: ' show '},200);
    });
    $ (this). MouseLeave (function () {$ (a). Find ('. Tab_name '). Animate ({bottom:-50,opacity: ' hide '},200);
   });
  });

 },
 };
return carousel;
 });

  above is the whole content of this article, I hope to help you learn.