jquery plugin animateslide make multiple slide slide _jquery

Home Banner's cool effects come from slideshow animations, which provide a perfectly compatible jquery animation effect: The new jquery multiple slide slide-full-screen animation animateslide (completely original code).

Go directly to the code and copy the HTML, CSS, and jquery code onto the page to render the perfect picture.

The HTML code is as follows:

<div class= "Animateslide" > <div class= "animateslideimgwrap" > <div class= "Animateslideimgbox Present" > <p class= "Text1" > Pro, this is the first line of title </p> <p class= "Text2" >AAAAAAAAAAAAAAAAAAAAA</p> & lt;! --&LT;IMG class= "img" alt= "src=" img/1.png "/>--> <div class=" img "style=" width:500px; height:390px; Background: #ffaeae; opacity:0.6; " ></div><!--The actual project with the above-annotated translucent PNG picture, currently temporarily using Div instead of the picture--> </div> <div class= "Animateslideimgbox"
      ; <p class= "Text1" > Pro, this is a line of propaganda </p> <p class= "Text2" >BBBBBBBBBBBBBBBBBBBBB</p> <!--<i MG class= "img" "alt=" "src=" Img/2.png "/>--> <div class=" img "style=" width:500px; height:390px; Background: #aeffb2; opacity:0.6; " ></div><!--The actual project with the above-annotated translucent PNG picture, currently temporarily using Div instead of the picture--> </div> <div class= "Animateslideimgbox"
      ; <p class= "Text1" > Pro, it's a miracle </p> <p class= "Text2" &Gt ccccccccccccccccccccc</p> <!----> <div class=" I MG "style=" width:500px; height:390px; Background: #aebdff; opacity:0.6; " ></div><!--The actual project with the above annotated translucent PNG picture, currently temporarily use Div instead of picture--> </div> </div> <div class= "Animatesl
 Idebtnl "><</div> <div class=" Animateslidebtnr "><</div> </div>

The

CSS code is as follows:

. animateslide {width:100%; height:390px position:relative; background: #f5f5f5;} animateslideimgwrap {width:100%; h eight:390px; Position:absolute; Z-index:1;
Overflow:hidden;} . animateslideimgwrap. Present {Display:block; animateslideimgbox {width:100%; height:390px; position:absolute; z-in Dex:1;
Display:none;} . Animateslideimgbox. text1 {font-family:microsoft yahei; font-size:36px; line-height:1.2em; color: #384cd0; position:a Bsolute; top:120px; Z-index:3;
White-space:nowrap;} . Animateslideimgbox. text2 {font-family:microsoft yahei; font-size:26px; line-height:1.2em; color:orange; position:ab Solute; top:200px; Z-index:3;
White-space:nowrap;} . Animateslideimgbox. img {position:absolute; left:470px top:0; z-index:2;} animateslidebtnl,. AnimateSlideBtnR {W idth:30px; height:60px; line-height:60px; font-size:20px; font-weight:700; Text-align:center;
  Background: #ddd; Position:absolute; left:30px; top:150px; Z-index:6; Cursor:pointer;Display:none;

 }. animateslidebtnr {left:auto; right:20px;}

The

jquery code is as follows:

(function ($) {$.fn.animateslide = function (options) {var defaults = {btnl: ". Animateslidebtnl", Btnr : ". Animateslidebtnr", Imgbox: ". Animateslideimgbox", animatetime:500, delaytime:5000, density:
    1};
    var opts = $.extend (defaults, options);
    var Widthwin = $ (window). width ();
    $ (window). Resize (function () {Widthwin = $ (window). width ();
    });
    This.on ("MouseEnter", function () {$ (this). Find (". Animateslidebtnl,. Animateslidebtnr"). Stop (). FadeIn (400);
    . On ("MouseLeave", function () {$ (this). Find (". Animateslidebtnl,. Animateslidebtnr"). Stop (). fadeout (400);
    });
      Return This.each (function () {var _this = $ (this);
      var _btnl = _this.find (OPTS.BTNL);
      var _btnr = _this.find (OPTS.BTNR);
      var _imgbox = _this.find (Opts.imgbox);
      var _imgboxcur = _imgbox.filter (". Present"); var _curtext1 = _imgboxcur.find (". Text1"), _curtext2 = _imgboxcur.find (". Text2"), _curimg =_imgboxcur.find (". img");
      var _imgboxnext = null, _NEXTTEXT1 = NULL, _NEXTTEXT2 = NULL, _nextimg = NULL; var index = _imgbox.index (_imgboxcur) | |
      0;
      var size = _imgbox.size ();
      var start = null;
      index++;
      if (index >= size) {index = 0;
      } _imgboxnext = _imgbox.eq (index);
      _nexttext1 = _imgboxnext.find (". Text1");
      _NEXTTEXT2 = _imgboxnext.find (". Text2");
      _nextimg = _imgboxnext.find (". img");
      _imgbox.find (". Text1,. Text2,. img"). CSS ("left", Widthwin);
      _imgboxcur.find (". Text1,. Text2"). CSS ("Left", (widthWin-980)/2 + "px");
      _imgboxcur.find (". img"). CSS ("Left", (widthWin-980)/2 + 470 + "px");
      _btnr.on ("click", Function () {animateslidefn ();
      });
      _btnl.on ("click", Function () {animateslidefn ();
      });
        Start = settimeout (function () {animateslidefn ();
      Start = settimeout (Arguments.callee, opts.delaytime);
      }, Opts.delaytime); FunctiOn Animateslidefn () {if (!) ( _imgboxcur.find (". Text1,. Text2,. img"). Is (": Animated") | | _imgboxnext.find (". Text1,. Text2,. img"). Is (": Animated")) {//Current frame animation _curtext1.animate ({L Eft:parseint (_curtext1.css ("left")) + +}, Opts.animatetime * 0.6, function () {_curtext1.animate
          ({left: " -510px"}, Opts.animatetime);
          });
            settimeout (function () {_curtext2.animate ({left:parseint (_curtext2.css ("left")) + 100
              }, Opts.animatetime * 0.6, function () {_curtext2.animate ({left: " -510px")
            }, Opts.animatetime);
          });
          }, 200);
            settimeout (function () {_curimg.animate ({left:parseint (_curimg.css ("left")) + 200 }, Opts.animatetime * 0.6, function () {_curimg.animate ({left: " -510px"}, op Ts.animatetime,function () {_imgbox.find (". Text1,. Text2,. img"). CSS ("left", Widthwin);
              _imgboxcur.removeclass ("present");
            });
          });
          }, 400);
            Next Frame animation settimeout (function () {_imgboxnext.addclass ("present");
              _nexttext1.animate ({left: (widthWin-980)/2-100}, Opts.animatetime, function () {
            _nexttext1.animate ({left: (widthWin-980)/2}, Opts.animatetime * 0.6);
            });
              settimeout (function () {_nexttext2.animate ({left: (widthWin-980)/2-100
                }, Opts.animatetime, function () {_nexttext2.animate ({left: (widthWin-980)/2
              }, Opts.animatetime * 0.6);
            });
            }, 200); settimeout (function () {_nextimg.animate ({left: (widthWin-980)/2 + 3Opts.animatetime, function () {_nextimg.animate ({left: Widthwin-
                  980)/2 + 470}, Opts.animatetime * 0.6, function () {index++;
                  if (index >= size) {index = 0;
                  } _imgboxcur = _imgbox.filter (". Present");
                  _imgboxnext = _imgbox.eq (index);
                  _curtext1 = _imgboxcur.find (". Text1");
                  _CURTEXT2 = _imgboxcur.find (". Text2");
                  _curimg = _imgboxcur.find (". img");
                  _nexttext1 = _imgboxnext.find (". Text1");
                  _NEXTTEXT2 = _imgboxnext.find (". Text2");
                _nextimg = _imgboxnext.find (". img");
              });
            });
          }, 400);
        }, Opts.density * 1200);
  }
      }
    });
};

}) (JQuery); $ (function () {$ (". Animateslide"). Animateslide ({btnl: ". Animateslidebtnl", Btnr: ". AnimatEslidebtnr ", Imgbox:". Animateslideimgbox ", animatetime:500, delaytime:6000, density:0.9});
 });