常见的焦点图旋转效果

DEMO:

CSS:

.poster{ position:relative;940px;height:300px;}
.poster .poster-box{ position:relative; z-index:1;940px;height:280px; overflow:hidden;}
.poster .poster-box img{ display:block; 100%;height:100%;}
.poster .poster-box .poster-list{ position:absolute;/*-webkit-box-reflect: below 0px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.6, transparent), to(white));*/}
.poster .poster-box .poster-1{640px; height:270px;left:150px; top:0; z-index:3;}
.poster .poster-box .poster-2{590px;height:220px; z-index:2; left:350px; top:10px; opacity:0.8; filter:Alpha(opacity=80);}
.poster .poster-box .poster-3{540px;height:170px; z-index:1; left:500px; top:20px;opacity:0.5; filter:Alpha(opacity=50);}
.poster .poster-box .poster-4{540px;height:170px; z-index:1; left:-100px; top:20px;opacity:0.5; filter:Alpha(opacity=50);}
.poster .poster-box .poster-5{590px;height:220px; z-index:2; left:0; top:10px; opacity:0.8; filter:Alpha(opacity=80);}

.poster .poster-btn{ display:block; position:absolute; z-index:2;150px;height:270px; cursor:pointer;}
.poster .poster-btn:hover{opacity:0.8;}
.poster .poster-btn-pre{left:0;top:0; background: url(btn_l.png) no-repeat  center center;}
.poster .poster-btn-next{right:0;top:0; background: url(btn_r.png) no-repeat  center center;}

　　DOM:

    <div class="J_PZPoster poster">
    	<a class="poster-btn poster-btn-pre"></a>
    	<ul class="poster-box">
        	<li class="poster-list poster-1"><a href="#1"><img src="1.jpg" /></a></li>
            <li class="poster-list poster-2"><a href="#2"><img src="2.jpg" /></a></li>
            <li class="poster-list poster-3"><a href="#3"><img src="3.jpg" /></a></li>
            <li class="poster-list poster-4"><a href="#4"><img src="4.jpg" /></a></li>
            <li class="poster-list poster-5"><a href="#5"><img src="5.jpg" /></a></li>
        </ul>
        <a class="poster-btn poster-btn-next"></a>
    </div>

　　JS:

　　

/**
@jquery插件，用到“jquery-easing.js”
@http://www.w3cfuns.com/blog-5416113-5397189.html
@杨永
@QQ：377746756
*/
function J_PZPoster(poster){
    var _this_=this;
    //保存传递进来的单个广告对象
    this.posterObject=poster;
    //保存海报列表的父节点
    this.posterBox=$(".poster-box",poster);
    //保存海报帧列表
    this.posterFrames=$(".poster-list",poster);
    this.frameIndex=this.posterFrames.size();
    //保存最后和第一个节点
    this.lastPoster=this.posterFrames.last();
    this.firstPoster=this.posterFrames.first()
    //保存左右切换按钮
    this.btnL=$(".poster-btn-pre",poster);
    this.btnR=$(".poster-btn-next",poster);
    this.flag=true;
    this.btnL.click(function(){
        //window.clearTimeout(this.t)
        //this.t=window.setTimeout(function(){_this_.rotateR();},300);
        if(_this_.flag){
            _this_.flag=false;
            _this_.rotateR();
        };

    });
    this.btnR.click(function(){
        //window.clearTimeout(this.t)
        //this.t=window.setTimeout(function(){_this_.rotateL();},300);
        if(_this_.flag){
            _this_.flag=false;
            _this_.rotateL();
        };
    });
    //创建倒序数组，准备序列化左旋转解决是否从最后一个查找节点，并且找前一个节点的属性值
    this.createArr();
};
J_PZPoster.prototype={
    //创建帧数，创建一个倒叙数组
    createArr:function(maxValue){
        var a=[];
        for(var i=0;i<this.frameIndex;i++){
            a.push(i);
        };
        a.reverse();
        this.reverseArr=a;
    },
    //左旋转
    rotateL:function(index){
        var _this=this,zIndex=Number(this.lastPoster.css("zIndex"));
        this.posterFrames.each(function(i,o){
            //console.log(_this.reverseArr[i]);
            //如果当前帧没有前一个兄弟节点，就获取最后一个兄弟节点
            if(_this.reverseArr[i]==0){
                _this.posterFrames.eq(_this.reverseArr[i]).css("zIndex",zIndex);
                _this.posterFrames.eq(_this.reverseArr[i]).animate({
                                                              _this.lastPoster.css("width"),
                                                              height:_this.lastPoster.css("height"),
                                                              left:_this.lastPoster.css("left"),
                                                              top:_this.lastPoster.css("top"),
                                                              opacity:_this.lastPoster.css("opacity")
                                                            },"fast",function(){
                                                                _this.flag=true;
                                                            });
            }else{
                _this.posterFrames.eq(_this.reverseArr[i]).css("zIndex",Number(_this.posterFrames.eq(_this.reverseArr[i]).prev().css("zIndex")));
                _this.posterFrames.eq(_this.reverseArr[i]).animate({
                                                            _this.posterFrames.eq(_this.reverseArr[i]).prev().css("width"),
                                                            height:_this.posterFrames.eq(_this.reverseArr[i]).prev().css("height"),
                                                            left:_this.posterFrames.eq(_this.reverseArr[i]).prev().css("left"),
                                                            top:_this.posterFrames.eq(_this.reverseArr[i]).prev().css("top"),
                                                            opacity:_this.posterFrames.eq(_this.reverseArr[i]).prev().css("opacity")
                                                            },"fast",function(){
                                                                _this.flag=true;
                                                            });
            };
        });
    },
    //右旋转
    rotateR:function(index){
        var _this=this,
            //为了防止循环时候没有最先拿到第一个参数的zIndex值，这里需先拿到
            z=Number(_this.firstPoster.css("zIndex"));
        this.posterFrames.each(function(i,o){
            //如果当前帧没有前一个兄弟节点，就获取最后一个兄弟节点
            if(i==_this.posterFrames.size()-1){
                $(o).css("zIndex",z);
                $(o).animate({
                            left:_this.firstPoster.css("left"),
                            _this.firstPoster.css("width"),
                            height:_this.firstPoster.css("height"),
                            top:_this.firstPoster.css("top"),
                            opacity:_this.firstPoster.css("opacity")
                            },"fast",function(){
                                        _this.flag=true;
                                    });
            }else{
                $(o).css("zIndex",Number($(o).next().css("zIndex")));
                $(o).animate({
                            left:$(o).next().css("left"),
                            $(o).next().css("width"),
                            height:$(o).next().css("height"),
                            top:$(o).next().css("top"),
                            opacity:$(o).next().css("opacity")
                            },"fast",function(){
                                        _this.flag=true;
                                    });
            };
        });
    }

};
J_PZPoster.init=function(posters){
    var _this=this;
    posters.each(function(){
        new _this(this);
    });
}


$(function(){
    //文档加载完毕后初始化所以广告对象
    J_PZPoster.init($(".J_PZPoster"));
});