jQuery插件animateSlide制作多点滑动幻灯片
首页banner的酷炫效果多来自全屏大图的幻灯片动画，下面提供一种完美兼容的jquery动画特效：全新jquery多点滑动幻灯片——全屏动画animateSlide（代码完全原创）。
直接上代码，把html、css和jquery代码copy到页面上即可呈现完美画面。
html代码如下：
<divclass="animateSlide"> <divclass="animateSlideImgWrap"> <divclass="animateSlideImgBoxpresent"> <pclass="text1">亲，这是第一行标题</p> <pclass="text2">AAAAAAAAAAAAAAAAAAAAA</p> <!--<imgclass="img"alt=""src="img/1.png"/>--> <divclass="img"style="width:500px;height:390px;background:#ffaeae;opacity:0.6;"></div><!--实际项目中用上面注释的半透明png图片，目前临时用div代替图片--> </div> <divclass="animateSlideImgBox"> <pclass="text1">亲，这是一行宣传语</p> <pclass="text2">BBBBBBBBBBBBBBBBBBBBB</p> <!--<imgclass="img"alt=""src="img/2.png"/>--> <divclass="img"style="width:500px;height:390px;background:#aeffb2;opacity:0.6;"></div><!--实际项目中用上面注释的半透明png图片，目前临时用div代替图片--> </div> <divclass="animateSlideImgBox"> <pclass="text1">亲，这是一个奇迹啊</p> <pclass="text2">CCCCCCCCCCCCCCCCCCCCC</p> <!--<imgclass="img"alt=""src="img/3.png"/>--> <divclass="img"style="width:500px;height:390px;background:#aebdff;opacity:0.6;"></div><!--实际项目中用上面注释的半透明png图片，目前临时用div代替图片--> </div> </div> <divclass="animateSlideBtnL"><</div> <divclass="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:MicrosoftYaHei;font-size:36px;line-height:1.2em;color:#384cd0;position:absolute;top:120px;z-index:3;white-space:nowrap;}
.animateSlideImgBox.text2{font-family:MicrosoftYaHei;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){
vardefaults={
btnL:".animateSlideBtnL",
btnR:".animateSlideBtnR",
imgBox:".animateSlideImgBox",
animateTime:500,
delayTime:5000,
density:1
};
varopts=$.extend(defaults,options);
varwidthWin=$(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);
});
returnthis.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;
varindex=_imgBox.index(_imgBoxCur)||0;
varsize=_imgBox.size();
varstart=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);
functionanimateSlideFn(){
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
});
});