成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

輪播圖js

Leo_chen / 729人閱讀

摘要：匿名函數(shù)自執(zhí)行外層的盒子下面所有的左側(cè)按鈕右側(cè)按鈕添加一個控制變量動畫時間盒子寬高圖片數(shù)組屬性圖片數(shù)組長度初始化事件監(jiān)聽拿到下的所有最外層盒子的的的的多帶帶設(shè)置默認(rèn)第一張圖片初始化左右按鈕初始化下面拿到下的所有的的左側(cè)按鈕右側(cè)按鈕自己

// 匿名函數(shù)自執(zhí)行
(function() {
    function Carsouel(json) {
        // 外層的盒子
        this.$dom = $("#"+json.id);
        // ul
        this.$ul = null;
        // ul下面所有的li
        this.$ullis = null;
        // 左側(cè)按鈕
        this.$left = null;
        // 右側(cè)按鈕
        this.$right = null;
        this.$ol = null;
        this.$ollis = null;
        // 添加一個控制變量
        this.idx = 0;
        // 動畫時間
        this.animateTime = json.animateTime;
        // 盒子寬高
        this.width = json.width;
        this.height = json.height;
        // 圖片數(shù)組屬性
        this.imgArr = json.images;
        // 圖片數(shù)組長度
        this.imgArrLength = json.images.length;
        // 初始化
        this.init();
        // 事件監(jiān)聽
        this.bindEvent();
    }

    Carsouel.prototype.init = function() {
        this.$ul = $("
    ");
        for(var i=0; i"));
        }
        this.$dom.append(this.$ul);
        // 拿到ul下的所有l(wèi)i
        this.$ullis = this.$ul.find("li");
        // 最外層盒子的css
        this.$dom.css({
            "position":"relative",
            "width": this.width,
            "height": this.height,
            "margin": "0 auto",
            "border": "1px solid gray",
            "overflow": "hidden"
        });
        // ul的css
        var _this = this;
        this.$ul.css({
            "position":"absolute",
            "width": _this.width,
            "height": _this.height
        });
        // ul的li的css
        this.$ullis.css({
            "position":"absolute",
            "left":_this.width
        });
        // 多帶帶設(shè)置默認(rèn)第一張圖片
        this.$ullis.eq(0).css({
            "left": 0
        });
        // 初始化左右按鈕
        this.$left = $("<");
        this.$right = $(">");
        this.$dom.append(this.$left);
        this.$dom.append(this.$right);
        // 初始化下面ol
        this.$ol = $("
      ");
        for(var i=0; i"));
        }
        this.$dom.append(this.$ol);
        // 拿到ol下的所有l(wèi)i
        this.$ollis = this.$ol.find("li");
        this.$ol.css({
            "position":"absolute",
            "bottom": 10,
            "left": 400,
            "list-style":"none" 
        });
        // ol的li的css
        this.$ollis.css({
            "float": "left",
            "width": 50,
            "height": 50,
            "margin-left":10 
        });
        this.$ollis.eq(0).addClass("active");
    }
    Carsouel.prototype.bindEvent = function() {
        var _this = this;
        // 左側(cè)按鈕
        this.$left.click(function() {
            _this.$ullis.eq(_this.idx).animate({"left":_this.width},_this.animateTime);
            _this.idx++;
            if (_this.idx > _this.imgArrLength-1) {
                _this.idx = 0;
            }
            _this.$ullis.eq(_this.idx).css({
                "left":-_this.width
            }).animate({"left":0},_this.animateTime);
        });
        // 右側(cè)按鈕 自己完成

        // 下面的ol的li事件綁定
        this.$ollis.click(function() {
            // 點擊哪個 顯示哪張圖片
            var old = _this.idx;
            var num = $(this).index();
            _this.idx = num;
            if (num==old) {
                return;
            }
            console.log(num,old);
            _this.$ullis.eq(old).css({
                "left": 0
            }).animate({"left":-_this.width},_this.animateTime);
            _this.$ullis.eq(num).css({
                "left": _this.width
            }).animate({"left":0},_this.animateTime);
            // 對應(yīng)樣式
            _this.$ollis.eq(num).addClass("active").siblings().removeClass("active");
        })

    }
    window.Carsouel = Carsouel;
})();

      文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

      轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103180.html

      相關(guān)文章

      • 原生js寫一個無縫輪播圖插件(支持vue)

        摘要：輪播圖插件前言寫這個插件的原因前段時間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動端。目前主要實現(xiàn)了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。 輪播圖插件(Broadcast.js) 前言：寫這個插件的原因 前段時間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

        MSchumi 評論0 收藏0

      • 原生js寫一個無縫輪播圖插件(支持vue)

        摘要：輪播圖插件前言寫這個插件的原因前段時間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動端。目前主要實現(xiàn)了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。 輪播圖插件(Broadcast.js) 前言：寫這個插件的原因 前段時間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

        hatlonely 評論0 收藏0

      • 原生js寫一個無縫輪播圖插件(支持vue)

        摘要：輪播圖插件前言寫這個插件的原因前段時間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動端。目前主要實現(xiàn)了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。 輪播圖插件(Broadcast.js) 前言：寫這個插件的原因 前段時間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

        褰辯話 評論0 收藏0

      • 實現(xiàn)簡單的輪播圖

        摘要：小練習(xí)輪播圖組件任務(wù)描述在和上一任務(wù)同一目錄下面創(chuàng)建一個文件，在目錄中創(chuàng)建，并在其中編碼，實現(xiàn)一個輪播圖的功能。實現(xiàn)思路考察對節(jié)點，定時器，事件的處理。 小練習(xí)3：輪播圖組件 任務(wù)描述在和上一任務(wù)同一目錄下面創(chuàng)建一個task0002_3.html文件，在js目錄中創(chuàng)建task0002_3.js，并在其中編碼，實現(xiàn)一個輪播圖的功能。 圖片數(shù)量及URL均在HTML中寫好 可以配置輪播的順...

        EsgynChina 評論0 收藏0

      • 原生 js 實現(xiàn)移動端 Touch 輪播圖

        摘要：輪播圖輪播圖其實就是通過手指的滑動，來左右切換輪播圖，下面我們通過一個案例，來實現(xiàn)下。結(jié)構(gòu)結(jié)構(gòu)上，還是用來存放輪播圖片，來存放輪播小圓點樣式初始化的一些標(biāo)簽，都會有一些默認(rèn)樣式，比如標(biāo)簽?zāi)J(rèn)是有一個邊距的，為了不影響美觀，我們需要清除掉。 showImg(https://segmentfault.com/img/remote/1460000017719408?w=1920&h=1080...

        Elle 評論0 收藏0

      發(fā)表評論

      0條評論

      最新活動
      閱讀需要支付1元查看
      <