2. 程式人生 > 程式設計 >JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

阿新 • • 發佈：2021-09-10

本文例項為大家分享了實現簡易輪播圖的具體程式碼，供大家參考，具體內容如下

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

完整程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ES6輪播圖</title>
    <script></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
            overflow: hidden;
            margin: auto;
            margin-top: 
 
50px;
            position: relative;
            top: 0;
            left: 0;
        }
        .outer {
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            transition: .3s all linear;
        }
        .img {
            width: 500px;
            height: 300px;
            float: left;
        }
  .btns span {
   position: absolute;
   width: 25px;
   height: 40px;
   top: 50%;
   margin-top: -20px;
   line-height: 40px;
   text-align: center;
   font-weight: bold;
   font-family: Simsun;
   font-size: 30px;
   border: 1px solid silver;
   opacity: 0.5;
   cursor: pointer;
   color: #fff;
   background: black;
  }
  .btns .left {
   left: 5px;
  }
  .btns .right {
   left: 100%;
   margin-left: -32px;
  }
        .right > :first-child,.left > :first-child {
            width: 35px;
            height: 35px;
        }
        .oOl {
            width: 163px;
            po
 
sition: absolute;
            right: 0;
            left: 0;
            margin: auto;
            bottom: 10px;
            list-style: none;
        }
        .oLi {
            width: 25px;
            height: 25px;
            background: white;
            border-radius: 50%;
            float: left;
        }
        .color {
            background: black;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="outer">
        <li class="img" style="background-image:url(img/0.jpeg)"></li>
        <li class="img" style="background-image:url(img/1.jpeg)"></li>
        <li class="img" style="background-image:url(img/2.jpeg)"></li>
        <li class="img" style="background-image:url(img/3.jpeg)"></li>
        <li class="img" style="background-image:url(img/4.jpeg)"></li>
    </ul>
 <div class="btns">
  <span class="left">&lt;</span>
  <span class="right">&gt;</span>
 </div>
</div>
</body>
<script>
    class Chart{
        constructor(name,on) {
   //獲取盒子名
            this.box = document.querySelector(name);
            this.json = json;
            //獲取輪播圖的屬性
            this.outer = document.querySelector(name + ' .outer');  //注意加空格
            this.left = document.querySelector(name + ' .left');
            this.right = document.querySelector(name + ' .right');
            //初始化
            this.timer = null;  //自gyVNnKfDi
 
動播放
            this.iNow = 0;
            this.init();
        }
        init() {
            const that = this; //儲存一個this
            console.log(this.json.a);
            if (this.json.a){
                console.log(1);
            }
            //克隆第一張放到最後
            let uLi = that.outer.children[0].cloneNode(true);
            that.outer.appendChild(uLi);
            that.outer.style.width = that.outer.children.length * that.outer.children[0].offsetWidth + 'px';
            //點選左右滑動
            if (that.json.slide) {
                that.left.style.display = 'block';
                that.right.style.display = 'block';
                this.left.onclick = () => that.rightGo();
                this.right.onclick = () => that.leftGo();
            }
            //自動播放
            if (that.json.move) {
                that.moveGo();
                //滑鼠移入移出
                if (that.json.loop) {
                    that.box.onmousemove = () => clearInterval(that.timer);
                    that.box.onmouseout = () => that.moveGo();
                }
            }
            //展示小圓點
            if (that.json.nav) {
                let oOL = document.createElement('ol');
                oOL.className = 'oOl';
                oOL.style.left = that.json.distanceLeft + 'px';
                that.box.appendChild(oOL);
                for (let i = 0; i < that.outer.children.length - 1; i++) {
                    let oLi = document.createElement('li');
                    oLi.className = 'oLi';
                    oLi.style.marginLeft = that.json.distance + 'px';
                    oOL.appendChild(oLi);
                }
                oOL.style.width = ((that.outer.children.length - 1) * document.querySelector('.oLi').offsetWidth) + (that.json.distance * that.outer.children.length) + 'px';
                that.alike();
            }
        };
        rightGo() {
            this.iNow++;
            if (this.iNow >= this.outer.children.length) {
                this.iNow = 1;
                this.outer.style.transition = '0s all linear';
                this.outer.style.left = 0;
            }
            this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
            this.outer.style.transition = '0.3s all linear';
            this.alike();
        };
        leftGo() {
            this.iNow--;
            if (this.iNow <= -1) {
                this.iNow = this.outer.children.length - 1;
                this.outer.style.transition = '0s all linear';
                this.outer.style.left = -(this.outer.children.length - 1) * this.outer.children[0].offsetWidth + 'px';
                this.iNow = this.outer.children.length - 2;
            }
            this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
            this.outer.style.transition = '0.3s all linear';
   this.alike();
        };
        moveGo() {
            const that = this;
            this.timer = setInterval(() => that.rightGo(),that.json.speed || 1500)
        };
        //圓點對應每張圖片
        alike() {
            let li = document.querySelectorAll('.oLi');
            for (let i = 0; i < li.length; i++) {
                li[i].classList.remove('color');
                if (i == this.iNow) {
                    li[i].classList.add('color');
                } else {
                    li[i].classList.remove('color');
                }
                //特殊：最後一張的時候是第一個
                if (this.iNow == li.length) {
                    li[0].classList.add('color');
                }
                //小圓點點選事件
                if (this.json.event) {
                    li[i].onmouseover = () => {
                        for (let i = 0; i < li.length; i++) {
                            li[i].classList.remove('color');
                        }
                        li[i].classList.add('color');
                        this.outer.style.left = -i * this.outer.children[0].offsetWidth + 'px';
                    }
                }
            }
        }
    }
    new Chart('.box',{
        move: true,//自動輪播
        speed: 1500,//輪播速度
        loop: true,//滑鼠移入移出效果
        slide: true,//點選左右滑動效果
        nav: true,//展示小圓點
        distance: 20,//小圓點間距
        event: true  //小圓點事件
    })
</script>
</html>

圖片：

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

本文例項為大家分享了實現簡易輪播圖的具體程式碼，供大家參考，具體內容如下

JavaScript實現簡易輪播圖最全程式碼解析（ES5）

本文例項為大家分享了實現簡易輪播圖效果的具體程式碼，供大家參考，具體內容如下

JavaScript實現簡易購物車最全程式碼解析（ES6面向物件）

本文例項為大家分享了實現簡易購物車的具體程式碼，供大家參考，具體內容如下

前端全棧大佬是如何使用javaScript實現一個輪播圖

技術標籤：javaScriptJavaScript輪播圖 效果圖： 程式碼如下： <!DOCTYPE html> <html>

React 實現簡易輪播圖

　　 使用 ReactJS 實現一個簡易的輪播圖 (carousel) 元件。 Task 1：在相框中展示圖片，左右按鈕切換當前圖片

JavaScript實現簡易放大鏡最全程式碼解析（ES5）

本文例項為大家分享了實現簡易放大鏡的具體程式碼，供大家參考，具體內容如下

JavaScript超詳細實現網頁輪播圖

目錄建立HTML頁面實現部分的功能1、左右按鈕2、動態生成小圓圈3、點選小圓圈，小圓圈變色4、點選小圓圈滾動圖片5、點選右側按鈕一次，就讓圖片滾動一張。6、點選右側按鈕， 小圓圈跟隨變化7、左側按鈕功能製作8、自動

JS實現普通輪播圖特效

本文例項為大家分享了JS實現輪播圖特效的具體程式碼，供大家參考，具體內容如下

js實現左右輪播圖

本文例項為大家分享了js實現左右輪播圖的具體程式碼，供大家參考，具體內容如下

原生js實現無縫輪播圖

本文例項為大家分享了js實現無縫輪播圖的具體程式碼，供大家參考，具體內容如下

JS實現橫向輪播圖（初級版）

本文例項為大家分享了JS實現橫向輪播圖的具體程式碼，供大家參考，具體內容如下

JS實現縱向輪播圖（初級版）

本文例項為大家分享了JS實現縱向輪播圖的具體程式碼，供大家參考，具體內容如下

JS實現橫向輪播圖（中級版）

本文例項為大家分享了JS實現橫向輪播圖的具體程式碼，供大家參考，具體內容如下

Swift實現3D輪播圖效果

本文例項為大家分享了Swift實現3D輪播圖效果的具體程式碼，供大家參考，具體內容如下

js實現無縫輪播圖效果

本文例項為大家分享了js實現無縫輪播圖的具體程式碼，供大家參考，具體內容如下

js實現無縫輪播圖

本文例項為大家分享了js實現輪播圖的具體程式碼，供大家參考，具體內容如下

js實現無縫輪播圖特效

用原生js實現無縫輪播圖，供大家參考，具體內容如下 index.js： var config = { imgWidth:380,//圖片尺寸

js實現無縫輪播圖外掛封裝

前言：頁面中輪播圖，對於一個前端開發者來說，是最基本的技能，不論是的商城網站，還是企業站，輪播圖已經成為不可缺少的一個模組，而常見的輪播圖不外乎兩種，一種是漸隱漸現輪播圖，一種是無縫輪播圖。網上關於輪

js實現幻燈片輪播圖

本文例項為大家分享了js實現幻燈片輪播圖的具體程式碼，供大家參考，具體內容如下

JS+css3實現幻燈片輪播圖

本文例項為大家分享了JS+css3實現幻燈片輪播圖的具體程式碼，供大家參考，具體內容如下