輪播圖效果/旋轉木馬效果

效果圖就這樣

Image.png

代碼注釋寫的很詳細，仔細閱讀代碼就可以學會了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
  <!--  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js" type="text/javascript"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>-->
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .poster-main{
            top: 100px;
            left: 100px;
            width: 800px;
            height: 600px;
            position: relative;
        }
        .poster-main .poster-list{
            width: 800px;
            height: 600px;
        }
        .poster-main .poster-list .poster-item{
            position: absolute;
            list-style-type: none;
            top: 0;
            left: 0;
        }
        .poster-main .poster-list .poster-item img{
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .poster-main .poster-list .poster-item a{
            display: block;
            width: 100%;
            height: 100%;
        }
        .poster-main .poster-btn{
            width: 100px;
            height: 600px;
            position: absolute;
            top: 0;
            background-color: red;
            z-index: 10;
            text-align: center;
            line-height: 600px;
            font-size: 80px;
            font-weight: 900;
            color: #555555;
            cursor: pointer;
            opacity: 0.2;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        }
        .poster-main .poster-pre-btn{
            left: 0;
        }
        .poster-main .poster-next-btn{
            right: 0;
        }

    </style>
</head>
<body>
    <div class="J_poster poster-main" data-setting='{
            "width":1000,
            "height":600,
            "postWidth":600,
            "postHeight":600,
            "scale":"0.8",
            "speed":500,
            "autoPlay":true,
            "delay":500,
            "verticalAlign":"top"
    }'><!--//json轉換成字符串，一定要是正確json對象，屬性上一定加上引號-->
        <div class="poster-btn poster-pre-btn" ><</div>
        <ul class="poster-list">
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
            <li class="poster-item"><a href=""></a></li>
        </ul>
        <div class="poster-btn poster-next-btn">></div>
    </div>
</body>
<script type="text/javascript">
    $(function(){
        //var carouse=new Carousel($(".J_poster").eq(0)) ;
        //如果有多個地方引用插件
        Carousel.init($(".J_poster"));

    });

    (function($){
        var Carousel=function(poster){ //實例化之后，方法中的this全部指向，實例化后的對象，進而引用位于原型上的方法
            var self=this;
            //保存單個旋轉木馬對象，防止對象被改變
            this.poster=poster;//保存在this上
            //找到輪播區的對象
            this.posterItemMain=this.poster.find("ul.poster-list");
            //保存切換按鈕
            this.nextBtn=this.poster.find("div.poster-next-btn");
            this.prevBtn=this.poster.find("div.poster-pre-btn");
            //第一幀的圖片
            this.posterItems=poster.find("li.poster-item");
            //當總圖片個數為偶數張的時候，就復制一張，插入到容器中，為了保證下面postFirstItem postLastItem獲取最新的數據，需緊接著posterItems來插入
            if(this.posterItems.size()%2==0){
                this.posterItemMain.append(this.posterItems.eq(0).clone());//把第一幀克隆一份，插入到容器中
                this.posterItems=this.posterItemMain.children();//通過父容器的子元素來更新最小幀數
            }

            this.postFirstItem=this.poster.find("li.poster-item").eq(0);
            this.postLastItem=this.poster.find("li.poster-item").last();

            /*定義旋轉的標識，當為true時改變*/
            this.rotateFlag=true;

            this.timer=null;
            //默認配置參數
            this.setting={
                width:800,//幻燈片寬度
                height:600,//幻燈片高度
                postWidth:450,//最前面照片寬度
                postHeight:600,//最前面照片高度
                scale:'0.9',//圖片縮放比例
                speed:500,//切換速度
                "autoPlay":true,
                "delay":500,
                verticalAlign:"middle"http://廣告位置
            };
            $.extend(this.setting,this.getSetting());//取得html中data-setting并擴展到this.setting上
            this.setSettingValue();
            this.setPosterPosition();
            this.nextBtn.click(function(){
                if(self.rotateFlag){
                    self.rotateFlag=false;
                    self.carouseRotate("right");
                }
            });
            this.prevBtn.click(function(){
                if(self.rotateFlag){
                    self.rotateFlag=false;
                    self.carouseRotate("left");
                }
            });
            //是否開啟自動播放
            this.autoPlay();
        };


        Carousel.init=function(posters){
            var _self=this;//這個this指向的調用上下文，指的是Carousel
            posters.each(function(){
               new _self( $(this));//這個this指向的是當前的一個poster，遍歷后的poster，當前上下文
            });
        };//創建類中初始化的方法，在此類中用來處理在頁面中所有傳進來的集合


        Carousel.prototype={//插件
            //設置配置參數值，來控制基本高度 寬度
            setSettingValue:function(){
                this.poster.css({
                    width:this.setting.width,
                    height:this.setting.height
                });
                this.posterItemMain.css({
                    width:this.setting.width,
                    height:this.setting.height
                });
                //計算切換按鈕寬度
                var w=(this.setting.width-this.setting.postWidth)/2;
                var h=this.setting.postHeight;
                this.prevBtn.css({
                    width:w,
                    height:h,
                    zIndex:Math.ceil(this.posterItems.size()/2)  //通過設置按鈕的index來保證永遠在前面，永遠大于一半的圖片個數 向上取整 zIndex不能有- 并且大寫
                });
                this.nextBtn.css({
                    width:w,
                    height:h,
                    zIndex:Math.ceil(this.posterItems.size()/2)
                });
                //設置第一幀位置
                this.postFirstItem.css({
                    left:w,
                    width:this.setting.postWidth,
                    height:this.setting.postHeight,
                    zIndex:Math.floor(this.posterItems.size()/2)  //向下取整 照片不予按鈕沖突
                });

            },
            //設置剩余廣告位置
            setPosterPosition:function(){
                var self=this;
                var sliceItem=this.posterItems.slice(1);//除去第一幀的
                var sliceSize=sliceItem.size()/2;
                var rightSlice=sliceItem.slice(0,sliceSize);//右側的幀數
                var level=Math.floor(this.posterItems.size()/2);//層級關系 z-index

                var leftSlice=sliceItem.slice(sliceSize);//左側幀數

                var rw=this.setting.postWidth;
                var rh=this.setting.postHeight;
                var gap=((this.setting.width-this.setting.postWidth)/2)/level;
                var firsLeft=((this.setting.width-this.setting.postWidth)/2);
                var offsetLeft=firsLeft+rw;//第一幀圖片最右側的left值
                //設置右側的css樣式
                rightSlice.each(function(i){
                    level--;
                    rw=rw*self.setting.scale; //每一次都乘以系數
                    rh=rh*self.setting.scale; //每一次都乘以系數
                    $(this).css({
                        zIndex:level, //來設置當前對象的層級關系
                        width:rw,
                        height:rh,
                        opacity:1/(++i),
                        left:offsetLeft+(i++)*gap-rw,
                        top:self.setVertualAlign(rh)
                    })
                });
                //設置左側CSS樣式
                var lw =rightSlice.last().width(); //通過對稱取得寬度
                var lh=rightSlice.last().height(); //通過對稱取得高度
                var oloop=Math.floor(this.posterItems.size()/2);//左側的層級關系 z-index
                leftSlice.each(function(i){
                    $(this).css({
                        zIndex:i, //來設置當前對象的層級關系
                        width:lw,
                        height:lh,
                        opacity:1/(oloop),
                        left:gap*(i++),
                        top:self.setVertualAlign(lh)
                    });
                    //把參數變化放在后面，先讓參數執行一次
                    lw=lw/self.setting.scale;
                    lh=lh/self.setting.scale;
                    oloop--;
                });
            },
            //設置垂直對其
            setVertualAlign:function(height){
                var self=this;
                var vertualType=self.setting.verticalAlign;
                var top=0;
                /*if(vertualType==="middle"){
                     top=(self.setting.height-height)/2
                }else if(vertualType==="top"){
                     top=0;
                }else if(vertualType==="bottom"){
                     top=self.setting.height-height;
                } else{
                    top=(self.setting.height-height)/2
                }*/
                switch (vertualType){
                    case "middle":return  top=(self.setting.height-height)/2; break;
                    case "top":return top=0; break;
                    case "bottom" :return top=self.setting.height-height;break;
                }
            },
            /*旋轉函數*/
            carouseRotate:function(dir){
                var _this_=this;//這個this保存對Carousel的引用
                var zIndexArryLeft=[];//為zIndex保存一個數組，來存儲在遍歷對象過程中存儲的數組
                var zIndexArryRight=[];//為zIndex保存一個數組，來存儲在遍歷對象過程中存儲的數組
                if(dir==="left"){//當前點擊的這一幀的參數變成前一幀的參數
                    this.posterItems.each(function(){//遍歷每一個對象
                        var self=$(this);//當前的jquery對象，保存起來
                        var prev=self.prev().get(0)?self.prev():_this_.postLastItem; //獲取向左旋轉過程中下一個對象
                        var width=prev.width(); //獲取下一個對象的參數
                        var height=prev.height();//獲取下一個對象的參數
                        var zIndex=prev.css("zIndex");//獲取下一個對象的參數
                        var opacity=prev.css("opacity");//獲取下一個對象的參數
                        var left=prev.css("left");//獲取下一個對象的參數
                        var top=prev.css("top");//獲取下一個對象的參數
                        zIndexArryLeft.push(zIndex);
                        /*設置當前對象動畫過渡過程*/
                        self.animate({
                            width:width,
                            height:height,
                            //zIndex:zIndex,
                            opacity:opacity,
                            left:left,
                            top:top
                        },_this_.setting.speed,function(){
                            //當動畫運動結束的的時候，更改動畫標識符
                            _this_.rotateFlag=true;
                        });
                    });
                    this.posterItems.each(function(i){
                        $(this).css("zIndex",zIndexArryLeft[i]);
                    });

                }else if(dir==="right"){//當前點擊的這一幀的參數變成后一幀的參數
                    this.posterItems.each(function(){//遍歷每一個對象
                        var self=$(this);//當前的jquery對象，保存起來
                        var next=self.next().get(0)?self.next():_this_.postFirstItem; //獲取向左旋轉過程中下一個對象
                        var width=next.width(); //獲取下一個對象的參數
                        var height=next.height();//獲取下一個對象的參數
                        var zIndex=next.css("zIndex");//獲取下一個對象的參數
                        var opacity=next.css("opacity");//獲取下一個對象的參數
                        var left=next.css("left");//獲取下一個對象的參數
                        var top=next.css("top");//獲取下一個對象的參數
                        zIndexArryRight.push(zIndex);
                        /*設置當前對象動畫過渡過程*/
                        self.animate({
                            width:width,
                            height:height,
                            //zIndex:zIndex,
                            opacity:opacity,
                            left:left,
                            top:top
                        },_this_.setting.speed,function(){
                            //當動畫運動結束的的時候，更改動畫標識符
                            _this_.rotateFlag=true;
                        });
                    })
                }
                this.posterItems.each(function(i){
                    $(this).css("zIndex",zIndexArryRight[i]);
                });
            },
            /*自動執行函數*/
            autoPlay:function(){
                var self=this;//保存對Carousel引用
                self.timer=setInterval(function(){
                    self.nextBtn.click();
                },self.setting.delay);
                /*this.posterItems.mouseover(function(){
                    clearInterval(self.timer);
                });
                this.posterItems.mouseout(function(){
                    clearInterval(self.timer);//防止效果疊加，需離開的時候在清除一次
                    self.autoPlay();
                })*/

                this.posterItems.hover(function(){ //當鼠標位于圖片上
                    clearInterval(self.timer);
                },function(){
                    clearInterval(self.timer);//防止效果疊加，需離開的時候在清除一次
                    self.autoPlay();
                });
                this.nextBtn.hover(function(){//當鼠標位于按鈕上
                    clearInterval(self.timer);
                },function(){
                    clearInterval(self.timer);//防止效果疊加，需離開的時候在清除一次
                    self.autoPlay();
                });
                this.prevBtn.hover(function(){//當鼠標位于按鈕上
                    clearInterval(self.timer);
                },function(){
                    clearInterval(self.timer);//防止效果疊加，需離開的時候在清除一次
                    self.autoPlay();
                });

            },



            //獲取人工配置參數
            getSetting:function(){
                var setting=this.poster.attr("data-setting");
                if(setting&&setting!=""){
                    return $.parseJSON(setting);
                }else{
                    return {};
                }
            },

        };
    window["Carousel"]=Carousel;//全局對象注冊，把Carousel暴露給全局對象
    })(jQuery);//傳遞進入jQuery用$接收
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,296評論 25贊 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,924評論 18贊 139
  • 在日常生活中，我們都會遇到一些歡樂的事情，使我們開心。 如果你想讓自己開心，那就去幫助需要幫助的人...
    流浪書者閱讀 236評論 0贊 3
  • 冬午日暖，前往清涼寺與僧人小坐。 讀佛教雜志《如是雨林》，登時不愿釋手。與師父索價，師父說：不收錢，拿去。上香...
    清靈靈子閱讀 725評論 16贊 3
  • 有人說：你的容顏和人生，都顯現在你讀的書里。起初，我不以為然，
    安言靜語閱讀 219評論 0贊 1