国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一款輪播插件的誕生

qianfeng / 1429人閱讀

摘要：同理，向左輪播至第一張圖片時(shí)，也會(huì)取消后輪播圖定位至第六張圖片而后再度開啟。續(xù)判斷是否開啟自動(dòng)輪播，如是則自動(dòng)輪播加入事件監(jiān)聽監(jiān)聽鼠標(biāo)移入事件，當(dāng)鼠標(biāo)移入的時(shí)候，停止自動(dòng)滾動(dòng)。監(jiān)聽左右按鈕的點(diǎn)擊，執(zhí)行上一張，下一張圖的輪播效果。

1. 前言

早在幾個(gè)月前，就想自己動(dòng)手寫個(gè)輪播圖組件，因此也看了許多文章，斷斷續(xù)續(xù)過了幾個(gè)月，今天終于有時(shí)間騰出手來給此插件做個(gè)總結(jié)，因此有了這篇文章。話不多說，先上 Demo, 效果如下：

2. HTML and CSS

本文不討論html,css的實(shí)現(xiàn)方式，直接貼上代碼



  
    
    Suporka Vue App
  
  
    

      
      
      

        

          
        

        

          
        

        

          
        

        

          
        

      

      
      
    

    
    
  

/*樣式代碼*/
* {
  margin: 0;
  padding: 0;
}
div {
  margin: 0;
  border: 0;
  padding: 0;
}
#carousal {
  width: 557px;
  overflow: hidden;
  position: relative;
}
#wrapper {
  display: box; /* OLD - Android 4.4- */
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  left: 0;
}
.suporka-carousel__arrow {
  /* display: none; */
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  background-color: rgba(31, 45, 61, 0.5);
  color: #fff;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.suporka-carousel__arrow--right {
  right: -38px;
}
.suporka-carousel__arrow--left {
  left: -38px;
}
#carousal:hover > .suporkal-carousel__arrow {
  display: block;
}
#carousal:hover .suporka-carousel__arrow--right {
  right: 16px;
}
#carousal:hover .suporka-carousel__arrow--left {
  left: 16px;
}
#suporka-dot {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}
#suporka-dot span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  display: inline-block;
  background: #999;
}
#suporka-dot .suporka-dot--acitve {
  background: #fff;
}
3. javascript 實(shí)現(xiàn)輪播圖功能

本插件是用 es6 寫的，當(dāng)然考慮兼容性，你可以選擇 babel 進(jìn)行編譯，本文不做闡述。

1. 首先，創(chuàng)建一個(gè) carousal 類

它有一些默認(rèn)參數(shù)，如time（圖片輪播間隔），transition (轉(zhuǎn)場動(dòng)畫時(shí)間)，autoScroll（是否自動(dòng)輪播）,showDot（是否顯示底部小圓點(diǎn)）。然后將頁面的一些元素掛載在類的屬性上。

class Carousal {
    constructor(userOption) {
    this.option = {
      time: 4000,
      transition: 0.8,
      autoScroll: true,
      showDot: false
    };
    // 當(dāng)前索引
    this.number = 1;
    // 定時(shí)器
    this.timer = null;
    this.interval = null;
    this.carousal = document.getElementById("carousal");
    this.wrapper = document.querySelector("#wrapper");
    this.childrenLength: document.getElementById("wrapper").children.length;
    this.init(userOption);
  }
}
2. 初始化dom

當(dāng)然，默認(rèn)參數(shù)是可以修改的，所以類傳入了一個(gè) userOption 對象, 在構(gòu)造函數(shù)中將用戶設(shè)置的參數(shù)覆蓋默認(rèn)參數(shù)，在this.init(userOption) 方法中執(zhí)行覆蓋。

輪播圖輪播的原理是：在輪播圖組首位添加一個(gè)末位圖片的副本，同時(shí)也在輪播圖末位添加一個(gè)首位圖片的副本，大概就是 5 1 2 3 4 5 1 , 此時(shí)共有7張圖片，當(dāng)向右輪播至第七張圖片‘1’ 時(shí), 取消transition后輪播圖定位至第二張圖片 ‘1’, 此時(shí)再度開啟transition 。同理，向左輪播至第一張圖片“5”時(shí)，也會(huì)取消transition后輪播圖定位至第六張圖片 ‘5’, 而后再度開啟 transition。

因此，我們需要手動(dòng)在dom結(jié)構(gòu)中插入這兩個(gè)首尾圖片。pushItem() 方法正是為此而生。

class Carousal {
    //...
  init(userOption) {
    // 合并用戶配置
    if (Object.assign) {
      Object.assign(this.option, userOption);
    } else {
      // 不支持 Object.assign 就調(diào)用 extend 方法
      this.extend(this.option, userOption, true);
    }
    // 設(shè)置動(dòng)畫 transition
    this.wrapper.style.transition = `all ${this.option.transition}s`;
    this.wrapper.style["-moz-transition"] = `all ${this.option.transition}s`;
    this.wrapper.style["-webkit-transition"] = `all ${this.option.transition}s`;
    this.wrapper.style["-o-transition"] = `all ${this.option.transition}s`;
    // 首尾添加元素
    this.pushItem();
  }
  // 合并屬性方法
  extend(o, n, override) {
    for (var p in n) {
      if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override))
        o[p] = n[p];
    }
  }
  // 初始化添加首尾子元素
  pushItem() {
    let movePx = this.carousal.offsetWidth; // 獲取輪播圖寬度
    let first = this.wrapper.children[0].cloneNode(true);
    let last = this.wrapper.children[this.childrenLength - 1].cloneNode(true);
    let parent = this.wrapper;
    parent.appendChild(first);
    parent.insertBefore(last, parent.children[0]);
    this.wrapper.style.left =
      this.wrapper.offsetLeft - movePx + "px";
  }
}

插入輪播圖片之后，判斷是否需要插入底部小圓點(diǎn)。requestAnimFrame()用于實(shí)現(xiàn)持續(xù)的動(dòng)畫效果。

class Carousal {
    init() {
        //...續(xù) this.pushItem();
        if (this.option.showDot) {
            let node = document.createElement("div");
            node.setAttribute("id", "suporka-dot");
            node.innerHTML = `${"".repeat(this.childrenLength)}`;
            this.carousal.appendChild(node);
            this.dot = document.getElementById("suporka-dot");
            this.dot.firstChild.setAttribute("class", "suporka-dot--acitve");
        }
        // 判斷是否開啟自動(dòng)輪播，如是則自動(dòng)輪播
        if (this.option.autoScroll) this.requestAnimFrame(this.autoMove());
    }
    requestAnimFrame() {
        return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }
}
3. 加入事件監(jiān)聽

監(jiān)聽鼠標(biāo)移入事件，當(dāng)鼠標(biāo)移入的時(shí)候，停止自動(dòng)滾動(dòng)。

監(jiān)聽左右按鈕的點(diǎn)擊，執(zhí)行上一張，下一張圖的輪播效果。

class Carousal {
    init() {
        //...續(xù) if (this.option.autoScroll) this.requestAnimFrame(this.autoMove());
        this.addEventListener();
    }
    // 添加事件
    addEvent(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
    // 事件監(jiān)聽
    addEventListener() {
        if (this.option.autoScroll) {
            this.addEvent(this.carousal, "mouseover", event => {
                clearInterval(this.interval);
            });
            this.addEvent(this.carousal, "mouseout", event => {
                this.autoMove();
            });
        }
        let prev = document.getElementById("suporka-prev-btn");
        let next = document.getElementById("suporka-next-btn");
        if (prev && next) {
            this.addEvent(prev, "click", event => {
                this.prev();
            });
            this.addEvent(next, "click", event => {
                this.next();
            });
        }
    }
}
4. 自動(dòng)輪播

定時(shí)動(dòng)畫，并且如果存在底部小圓點(diǎn)，修改其類名，達(dá)到與輪播圖同步的效果。

// 自動(dòng)輪播
class Carousal {
    // ...
    autoMove() {
        let movePx = this.carousal.offsetWidth;
        this.interval = setInterval(() => {
            this.number += 1;
            this.wrapper.style.left = 0 - movePx * this.number + "px";
            if (this.number === this.childrenLength + 1) this.startMove();
            if (this.dot)
                this.setDotClass(
                    this.dot.children,
                    this.number - 1,
                    "suporka-dot--acitve"
                );
        }, this.option.time);
    }
    // 開始移動(dòng)
    startMove() {
        this.number = 1;
        this.timer = setTimeout(() => {
            this.wrapper.style.transition = `none`;
            this.wrapper.style.left = -this.carousal.offsetWidth + "px";
            setTimeout(() => {
                this.wrapper.style.transition = `all ${
                    this.option.transition
                }s`;
            }, 100);
        }, this.option.transition * 1000);
    }
    // 設(shè)置小圓點(diǎn)樣式
    setDotClass(parent, index, cls) {
        // 沒有小圓點(diǎn)就返回
        if (!this.dot) return false;
        for (let i = 0; i < parent.length; i++) {
            removeClass(parent[i], cls);
        }
        addClass(parent[index], cls);
    }
}

// 三個(gè)類名操作方法
function hasClass(ele, cls) {
    if (ele.className)
        return ele.className.match(new RegExp("(s|^)" + cls + "(s|$)"));
    else return false;
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        let reg = new RegExp("(s|^)" + cls + "(s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}
5. 實(shí)現(xiàn)上一張，下一張輪播功能 
class Carousal {
    //...
    // prev上一張
    prev() {
        let movePx = this.carousal.offsetWidth;
        this.number -= 1;

        this.wrapper.style.left = 0 - movePx * this.number + "px";
        if (this.number === 0) this.goLastOne();
        if (this.dot)
            this.setDotClass(
                this.dot.children,
                this.number - 1,
                "suporka-dot--acitve"
            );
    }
    // 下一張
    next() {
        let movePx = this.carousal.offsetWidth;
        this.number += 1;
        this.wrapper.style.left = 0 - movePx * this.number + "px";
        if (this.number === this.childrenLength + 1) this.startMove();
        if (this.dot)
            this.setDotClass(
                this.dot.children,
                this.number - 1,
                "suporka-dot--acitve"
            );
    }
    // 去到最后一張
    goLastOne() {
        this.number = this.childrenLength;
        this.timer = setTimeout(() => {
            this.wrapper.style.transition = `none`;
            this.wrapper.style.left =
                -this.carousal.offsetWidth * this.childrenLength + "px";
            setTimeout(() => {
                this.wrapper.style.transition = `all ${
                    this.option.transition
                }s`;
            }, 100);
        }, this.option.transition * 1000);
    }
}
4.優(yōu)化及其他

最后，代碼需經(jīng)過babel轉(zhuǎn)譯，并且以 umd 的形式支持瀏覽器直接引入，requirejs 及 commonjs 導(dǎo)入，詳細(xì)做法可以參考我之前的一篇文章《ES6 手寫一個(gè)“辨色”小游戲》。也可以參考我在 github 上的代碼, 歡迎 fork and star .

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

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

相關(guān)文章

  • swiper的使用

    摘要：是一款輪播圖插件，我是用在里面，方便省事兒。官網(wǎng)地址地址安裝安裝完成之后，我沒有在中注冊它，而是在使用頁面注冊的。因?yàn)橥ǔ碚f輪播圖只會(huì)在一個(gè)應(yīng)用的首頁展示，所以就沒必要在全局注冊它，只用在頁面注冊使用一下就可以了。 swipe是一款輪播圖插件，我是用在vue里面，方便省事兒。swipe里面有很多關(guān)于滑動(dòng)的組建，我只用過輪播圖，如果以后有時(shí)間，可以再看看官網(wǎng)上別的組件介紹。官網(wǎng)地址 g...

    makeFoxPlay 評論0 收藏0

  • swiper的使用

    摘要：是一款輪播圖插件，我是用在里面，方便省事兒。官網(wǎng)地址地址安裝安裝完成之后，我沒有在中注冊它，而是在使用頁面注冊的。因?yàn)橥ǔ碚f輪播圖只會(huì)在一個(gè)應(yīng)用的首頁展示，所以就沒必要在全局注冊它，只用在頁面注冊使用一下就可以了。 swipe是一款輪播圖插件，我是用在vue里面，方便省事兒。swipe里面有很多關(guān)于滑動(dòng)的組建，我只用過輪播圖，如果以后有時(shí)間，可以再看看官網(wǎng)上別的組件介紹。官網(wǎng)地址 g...

    MyFaith 評論0 收藏0

  • swiper的使用

    摘要：是一款輪播圖插件，我是用在里面，方便省事兒。官網(wǎng)地址地址安裝安裝完成之后，我沒有在中注冊它，而是在使用頁面注冊的。因?yàn)橥ǔ碚f輪播圖只會(huì)在一個(gè)應(yīng)用的首頁展示，所以就沒必要在全局注冊它，只用在頁面注冊使用一下就可以了。 swipe是一款輪播圖插件，我是用在vue里面，方便省事兒。swipe里面有很多關(guān)于滑動(dòng)的組建，我只用過輪播圖，如果以后有時(shí)間，可以再看看官網(wǎng)上別的組件介紹。官網(wǎng)地址 g...

    aaron 評論0 收藏0

  • JavaScript精編干貨

    摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問我老姚，下同怎么學(xué)前端的問題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫 之前加過一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...

    Fourierr 評論0 收藏0

  • 前端常用插件、工具類庫匯總

    摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯(cuò)誤監(jiān)控上報(bào)，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對移動(dòng)端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動(dòng)畫庫動(dòng)畫庫，也是目前通用的動(dòng)畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<