jquery如何實(shí)現(xiàn)走馬燈特效

本文小編為大家詳細(xì)介紹“jquery如何實(shí)現(xiàn)走馬燈特效”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery如何實(shí)現(xiàn)走馬燈特效”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

話不多說，先上大致效果：

html代碼：

<div class="main-box">
    <div class="poker_box">
      <div class="pokerCaroursel poker-content" data-setting='{
        "width":1094,
        "height":338,
        "pokerWidth":488,
        "pokerHeight":338,
        "scale":0.85,
        "speed": 500,
        "autoPlay":true,
        "delay":2000,
        "verticalAlign":"middle"
                }'>
        <!-- 向左按鈕 -->
        <div class="poker-btn poker-prev-btn"></div>
        <ul class="poker-list">
          <!-- 圖片張數(shù)最好是基數(shù)，這樣呈現(xiàn)的畫面才好看 -->
          <li class="poker-item poker-rad">
              <div class="item">
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img class="tabImg" src="images/01.jpg"></a> 
                <span class="poker-item-title">圖一</span>
              </div>
          </li>
          <li class="poker-item poker-rad">
              <div class="item">
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img class="tabImg" src="images/02.jpg"></a>
                <span class="poker-item-title">圖二</span> 
              </div>
          </li>
          <li class="poker-item poker-rad">
            <div class="item">
              <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img class="tabImg" src="images/03.jpg"></a>
              <span class="poker-item-title">圖三</span>
            </div>
          </li>
        </ul>
        <!-- 向右按鈕 -->
        <div class="poker-btn poker-next-btn"></div>
      </div>
    </div>
  </div>

注意：

• 類名不要隨意更改（否則插件里面的也要更改），替換圖片地址即可。

• data-setting屬性記得按照以上格式設(shè)置，不然可能報錯

script代碼:

<script src="jquery.js"></script>
<script src="jquery.pokerCarousel.js"></script>
<script>
pokerCaroursel.init($('.pokerCaroursel'))
</script>	

注意：
要記得先引入jquery.js文件（可去官網(wǎng)下載：https://jquery.com/download/），再引入jquery.pokerCarousel.js文件

jquery.pokerCarousel.js文件完整代碼：

var MIDDLE_PIC_POS = 1

//計算如何用最短的距離移動到目標(biāo)
//由于有兩種移動方式,向左邊移動或者像右邊移動,只需要在這兩種方式中選擇一個小的就行了

;(function($){
    var pokerCaroursel = function (caroursel){
        var self = this;
        this.caroursel = caroursel;
        this.pokerList = caroursel.find(".poker-list");
        this.pokerItems = caroursel.find(".poker-item");
        this.firstpokerItem = this.pokerItems.first();
        this.lastpokerItem = this.pokerItems.last();
        this.prevBtn = this.caroursel.find(".poker-prev-btn");
        this.nextBtn = this.caroursel.find(".poker-next-btn");

        this.buttonItems = caroursel.find(".tabBtn");

        //每個移動元素的位置索引,用于記錄每個元素當(dāng)前的位置,在每次移動的時候,該數(shù)組的值都會發(fā)生變化
        //數(shù)組的下標(biāo)對應(yīng)li元素的位置索引
        this.curPositions = [];
        for(var i = 0;i<this.pokerItems.length;++i){
            this.curPositions[i] = i+1;
        }

        this.setting = {
            "width":"1106",
            "height":"340",
            "pokerWidth":"488",
            "pokerHeight":"340",
            "scale":"0.8",
            "speed":"1000",
            "isAutoplay":"true",
            "dealy":"2000"
        };

        $.extend(this.setting,this.getSetting());

        this.setFirstPosition();

        this.setSlicePosition();

        this.refreshCss();

        this.rotateFlag = true;
        this.prevBtn.bind("click",function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.rotateAnimate("left")
            }
        });

        this.nextBtn.bind("click",function(){
            if(self.rotateFlag){
                self.rotateFlag = false;
                self.rotateAnimate("right")
            }
        });

        //綁定位置按鈕事件

         this.buttonItems.each(function(index){
             var _this = $(this);
             _this.click(function(){
                 self.clickPosButtonIndex(index);
             })
         });

        if(this.setting.isAutoplay){
            this.autoPlay();
            this.caroursel.hover(function(){clearInterval(self.timer)},function(){self.autoPlay()})
        }
    };
    pokerCaroursel.prototype = {
        autoPlay:function(){
          var that = this;
          this.timer =  window.setInterval(function(){
              that.nextBtn.click();
          },that.setting.dealy)
        },


        refreshCss:function(){
            var that= this;
            var curFirstPos;//當(dāng)前位于中間的li元素位置
            this.buttonItems.each(function(index){
                var _this = $(this);
                var curPos = that.curPositions[index];
                if(curPos == 1){
                    _this.addClass('poker-btn-active');
                }
                else{
                    _this.removeClass('poker-btn-active');
                }
            });
        },

        //記錄每次移動的狀態(tài)
        refreshPositions:function(offset){
            for(var i = 0; i < this.curPositions.length; ++i)
            {
                var nextPos = this.curPositions[i] + offset;
                if (nextPos > this.curPositions.length) {//移動超過末尾,則位置變成到開頭
                    nextPos = nextPos - this.curPositions.length;
                }else 
                 if (nextPos < 1) {向左邊移動已經(jīng)移動到開始位置更左邊,則位置變成結(jié)束
                     nextPos = this.curPositions.length + nextPos;
                 }
                this.curPositions[i] = nextPos;
            }
            //console.log('after refreshPositions',this.curPositions);
            this.refreshCss();
        },

         cal_move_path:function(curPos,desPos,arraySize) {
            if(curPos == desPos) return null;
            //往左邊移動
             var goRightSteps;
             var goLeftSteps;
             var retDirect;
             var retStep;
             if(curPos > desPos){
                 goRightSteps = curPos - desPos;
                 goLeftSteps = desPos + (arraySize - curPos);
                 retDirect = (goRightSteps <= goLeftSteps) ? "left":"right";
                 return {"direct":retDirect,"step":Math.min(goLeftSteps,goRightSteps)};
             }
        },


        //點(diǎn)擊位置按鈕,根據(jù)點(diǎn)擊的按鈕索引 決定向左還是向右移動[因?yàn)橹挥腥齻€位置,該方法能夠僅靠向左或向右就能將
        //指定的位置移動到中間]
        clickPosButtonIndex:function(index){
            var self = this;
            if(self.rotateFlag == false) {//目前正在移動等移動結(jié)束后才能進(jìn)入
                return;
            }

            var curPos = this.curPositions[index];
            var retPath = this.cal_move_path(curPos,MIDDLE_PIC_POS,this.curPositions.length);
            if (retPath == null){
                return;
            }

            var direct = retPath.direct;
            var step = retPath.step;

            self.rotateFlag = false;
            self.rotateAnimate(direct,step)
        },

        rotateAnimate:function(type,step){
            step = step || 1;
            var that = this;
            var zIndexArr = [];
            var speed = that.setting.speed;
                this.pokerItems.each(function(){
                   var self = $(this);
                   var destPic = null;
                   var curPic = self;
                   for (var i = 0; i < step;++i){
                        if(type == "left"){// 向左邊移動, 下一張圖片在自己的右邊,所以用next()
                            destPic = curPic.next().get(0)?curPic.next():that.firstpokerItem;
							
                        }
                        else{
                            destPic = curPic.prev().get(0)?curPic.prev():that.lastpokerItem;
                        }
                        curPic = destPic;
                    }

                    var width = destPic.css("width");
                    var height = destPic.css("height");
                    var zIndex = destPic.css("zIndex");
                    var opacity = destPic.css("opacity");
                    var left = destPic.css("left");
                    var top = destPic.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top
                    },speed,function(){
                        that.rotateFlag = true;
                    });
                });
                this.pokerItems.each(function(i){
                    $(this).css("zIndex",zIndexArr[i]);
					
                });

                if (type == 'right'){
                    this.refreshPositions(-step);
                }else{
                    this.refreshPositions(step);
                }
        },

        setFirstPosition:function(){
            this.caroursel.css({"width":this.setting.width,"height":this.setting.height});
            this.pokerList.css({"width":this.setting.width,"height":this.setting.height});
            var width = (this.setting.width - this.setting.pokerWidth) / 2;

            console.log(this.pokerItems.length)
            this.prevBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.pokerItems.length/2)});
            this.nextBtn.css({"width":width , "height":this.setting.height,"zIndex":Math.ceil(this.pokerItems.length/2)});
            this.firstpokerItem.css({
                "width":this.setting.pokerWidth,
                "height":this.setting.pokerHeight,
                "left":width,
                "zIndex":Math.ceil(this.pokerItems.length/2),
                "top":this.setVertialType(this.setting.pokerHeight)
            });
        },
        setSlicePosition:function(){
            var _self = this;
            var sliceItems = this.pokerItems.slice(1),
                level = Math.floor(this.pokerItems.length/2),
                leftItems = sliceItems.slice(0,level),
                rightItems = sliceItems.slice(level),
                pokerWidth = this.setting.pokerWidth,
                pokerHeight = this.setting.pokerHeight,
                Btnwidth = (this.setting.width - this.setting.pokerWidth) / 2,
                gap = Btnwidth/level,
                containerWidth = this.setting.width;

            var i = 1;
            var leftWidth = pokerWidth;
            var leftHeight = pokerHeight;
            var zLoop1 = level;
            leftItems.each(function(index,item){
                var scale = _self.setting.scale;
                if(index==1){
                    scale = scale*scale;
                }
                leftWidth = pokerWidth * scale;
                leftHeight = pokerHeight*scale;
                $(this).css({
                    "width":leftWidth,
                    "height":leftHeight,
                    "left": Btnwidth - i*gap,
                    "zIndex":zLoop1--,
                    "opacity":2/(i+1),
                    "top":_self.setVertialType(leftHeight)
                });
                i++;
            });

            var j = level;
            var zLoop2 = 1;
            var rightWidth = pokerWidth;
            var rightHeight = pokerHeight;
            rightItems.each(function(index,item){
                var scale = _self.setting.scale;
                if(index==0){
                    scale = scale*scale;
                }
                var rightWidth = pokerWidth * scale;
                var rightHeight = pokerHeight*scale;
                $(this).css({
                    "width":rightWidth,
                    "height":rightHeight,
                    "left": containerWidth -( Btnwidth - j*gap + rightWidth),
                    "zIndex":zLoop2++,
                    "opacity":2/(j+1),
                    "top":_self.setVertialType(rightHeight)
                });
                j--;
            });
        },
        getSetting:function(){
            var settting = this.caroursel.attr("data-setting");
            if(settting.length > 0){
                return $.parseJSON(settting);
            }else{
                return {};
            }
        },
        setVertialType:function(height){
            var align = this.setting.align;
            if(align == "top") {
                return 0
            }else if(align == "middle"){
                return (this.setting.pokerHeight - height) / 2
            }else if(align == "bottom"){
                return this.setting.pokerHeight - height
            }else {
                return (this.setting.pokerHeight - height) / 2
            }
        }
    };
    pokerCaroursel.init = function (caroursels){
        caroursels.each(function(index,item){
            new pokerCaroursel($(this));
        })  ;
    };
    window["pokerCaroursel"] = pokerCaroursel;
})(jQuery);// JavaScript Document

css代碼：

.main-box{ height: 352px; width:1118px;position: absolute;top: 122px;left: 32px;}
.poker_box h3 {font-size: 30px;color: #015293;font-weight: bold;text-align: center;}
.poker_box h4 {font-size: 16px;color: #015293;margin: 10px 0 35px;text-align: center;}
.poker-content {width: 1129px;position: relative;width: 100%;height: 350px!important;margin-left: auto;margin-right: auto;}
.poker-content img {display: block;box-shadow: 0px 0px 10px #222222;-webkit-box-shadow: 0px 0px 10px #222222;border: 0;}

.poker-content a, .poker-content img {display: block;width: 100%;height: 100%;border: none;}
img {border: none;display: block;}
.poker-content .poker-list {width: 1118px;height: 500px;}
.poker-content .poker-list .poker-item {width: 200px;height: 350px;position: absolute;left: 0;top: 0;}
.poker-rad{  border-radius: 20px;  overflow: hidden;}
.poker-rai{  border-radius: 20px;  overflow: hidden;}
.poker-content .poker-list .poker-item .item {position: relative;width: 100%;height: 100%;}
.poker-content .poker-btn {position: absolute;top: 0;cursor: pointer;filter: opacity(.5) brightness(1);}
.poker-content .poker-btn:hover {filter: opacity(1) brightness(2);}
.poker-content .poker-prev-btn {left: 0;}
.poker-content .poker-next-btn {right: 0;}
.poker-item-title {background:rgba(42, 42, 42, 0.8) none repeat scroll 0 0 !important;/*實(shí)現(xiàn)FF背景透明，文字不透明*/filter:Alpha(opacity=80); background:#2a2a2a;text-align: center;color: #FFF;width: 100%;height: 52px;line-height: 52px;position: absolute;bottom: 0;text-indent: 29px}

讀到這里，這篇“jquery如何實(shí)現(xiàn)走馬燈特效”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。