jQuery插件animateSlide制作多点滑动幻灯片

首页banner的酷炫效果多来自全屏大图的幻灯片动画，下面提供一种完美兼容的jquery动画特效：全新jquery多点滑动幻灯片——全屏动画animateSlide（代码完全原创）。
直接上代码，把html、css和jquery代码copy到页面上即可呈现完美画面。
html代码如下：

<div class="animateSlide"><div class="animateSlideImgWrap"><div class="animateSlideImgBox present"><p class="text1">亲，这是第一行标题</p><p class="text2">AAAAAAAAAAAAAAAAAAAAA</p><！--<img class="img" alt="" src="img/1.png" />--><div class="img" style="width: 500px; height: 390px; background: #ffaeae; opacity: 0.6;"></div><！-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 --></div><div class="animateSlideImgBox"><p class="text1">亲，这是一行宣传语</p><p class="text2">BBBBBBBBBBBBBBBBBBBBB</p><！--<img class="img" alt="" src="img/2.png" />--><div class="img" style="width: 500px; height: 390px; background: #aeffb2; opacity: 0.6;"></div><！-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 --></div><div class="animateSlideImgBox"><p class="text1">亲，这是一个奇迹啊</p><p class="text2">CCCCCCCCCCCCCCCCCCCCC</p><！--<img class="img" alt="" src="img/3.png" />--><div class="img" style="width: 500px; height: 390px; background: #aebdff; opacity: 0.6;"></div><！-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 --></div></div><div class="animateSlideBtnL"><</div><div class="animateSlideBtnR"><</div></div>

css代码如下：

.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;}

jquery代码如下：

（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"））） {//当前帧动画_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）;//下一帧动画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}）;}）;