New jquery multi-point slide slides-full screen animation animateSlide,

New jquery multi-point slide slides-full screen animation animateSlide,

On the homepage, banner has many cool effects from full-screen slide animations. Below is a perfect and compatible jquery animation effect: the brand new jquery multi-point slide-full-screen animation animateSlide (the code is completely original ).

Directly copy the html, css, and jquery code to the page to display the perfect picture.

The html code is as follows:

<Div class = "animateSlide"> <div class = "animateSlideImgWrap"> <div class = "animateSlideImgBox present"> <p class = "text1"> dear, this is the first line title </p> <p class = "text2"> AAAAAAAAAAAAAAAAAAAAA </p> <! --  --> <div class =" img "style =" width: 500px; height: 390px; background: # ffaeae; opacity: 0.6; "> </div> <! -- The translucent png Image annotated above is used in the actual project, currently, we temporarily use div to replace images --> </div> <div class = "animateSlideImgBox"> <p class = "text1"> dear, this is a publicity line </p> <p class = "text2"> bbbbbbbbbbbbbbbbbbbbbbb </p> <! --  --> <div class =" img "style =" width: 500px; height: 390px; background: # aeffb2; opacity: 0.6; "> </div> <! -- The translucent png Image annotated above is used in the actual project, currently, we temporarily use div to replace images --> </div> <div class = "animateSlideImgBox"> <p class = "text1"> dear, this is a miracle </p> <p class = "text2"> CCCCCCCCCCCCCCCCCCCCC </p> <! --  --> <div class =" img "style =" width: 500px; height: 390px; background: # aebdff; opacity: 0.6; "> </div> <! -- The translucent png Image annotated above is used in the actual project. Currently, the image is replaced with a div temporarily --> </div> <div class = "animateSlideBtnL"> & lt; </div> <div class = "animateSlideBtnR"> & lt; </div>

The css code is as follows:

.animateSlide {width: 100%; height: 390px; position: relative; background: #f5f5f5;}.animateSlideImgWrap {width: 100%; height: 390px; position: absolute; z-index: 1; overflow: hidden;}.animateSlideImgWrap .present {display: block;}.animateSlideImgBox {width: 100%; height: 390px; position: absolute; z-index: 1; display: none;}.animateSlideImgBox .text1 {font-family: Microsoft YaHei; font-size: 36px; line-height: 1.2em; color: #384cd0; position: absolute; top: 120px; z-index: 3; white-space: nowrap;}.animateSlideImgBox .text2 {font-family: Microsoft YaHei; font-size: 26px; line-height: 1.2em; color: orange; position: absolute; top: 200px; z-index: 3; white-space: nowrap;}.animateSlideImgBox .img {position: absolute; left: 470px; top: 0; z-index: 2;}.animateSlideBtnL,.animateSlideBtnR {    width: 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 (". anim AteSlideBtnL ,. 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. fin D (". 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 "2.16.css (" left ", (widthWin-980)/2 +" px "); _ imgBoxCur. find (". img "2.16.css (" left ", (widthWin-980)/2 + 470 +" px "); _ btnR. on ("click", function () {animateSlideFn () ;}); _ btnL. on ("click", function () {animateSlideFn () ;}); start = setTimeout (function () {anima TeSlideFn (); 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 ({left: parseInt(_curText1.css ("left") + 100}, 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"}, opts. animateTime, function () {_ imgBox. find (". text1 ,. text2 ,. img ").css (" left ", widthWin); _ imgBoxCur. removeClass ("present") ;}) ;}, 400); // The next frame of the 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 + 370}, opts. 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 });});