全新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">&lt;</div>
    <div class="animateSlideBtnR">&lt;</div>
</div>

css代码如下：

.animateSlide {width: 100%; height: 390px; position: relative; background: #f5f5f5;}
.animateSlideImgWrap {width: 100%; height: 390px; position: absolute; z-index:; overflow: hidden;}
.animateSlideImgWrap .present {display: block;}
.animateSlideImgBox {width: 100%; height: 390px; position: absolute; z-index:; display: none;}
.animateSlideImgBox .text1 {font-family: Microsoft YaHei; font-size: 36px; line-height: 1.2em; color: #384cd0; position: absolute; top: 120px; z-index:; white-space: nowrap;}
.animateSlideImgBox .text2 {font-family: Microsoft YaHei; font-size: 26px; line-height: 1.2em; color: orange; position: absolute; top: 200px; z-index:; white-space: nowrap;}
.animateSlideImgBox .img {position: absolute; left: 470px; top:; z-index:;}
.animateSlideBtnL,
.animateSlideBtnR {
    width: 30px; height: 60px; line-height: 60px; font-size: 20px; font-weight:; text-align: center; background: #ddd;
    position: absolute; left: 30px; top: 150px; z-index:; 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
    });
});