帶你手擼一個輪播圖從簡單→組件化的實現

輪播圖簡單實現

1、開始步驟

構建目錄結構
羅列元素，元素較多的情況下，一邊寫元素一邊寫樣式
寫js

2、簡單實現輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="content" id="content">
        <span class="change left" id="pre">&lt;</span>
        <span class="change right" id="next">&gt;</span>
        <ul class="contentList" id="contentList">
            <li><img src="./img/1.jpg"></li>
            <li><img src="./img/2.jpg"></li>
            <li><img src="./img/3.jpg"></li>
            <li><img src="./img/4.jpg"></li>
            <li><img src="./img/5.jpg"></li>
        </ul>
        <div class="canvas">
            <ul class="contentCircle" id="contentCircle">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

.content{
    width: 500px;
    height: 300px;
    border: 1px solid black;
    margin: 30px auto;
    position: relative;;
}
.contentList li{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /*  opacity 設置透明度 */
    opacity: 0;
}
.contentList li img{
    width: 100%;
    height: 100%;
}
.active{
    z-index: 9;
    /* !important 權重 */
    opacity: 1!important;
    /* transition 設置動畫 */
    transition: all 1.5s;
}
.change{
    width: 20px;
    height: 30px;
    background-color: gray;
    display: block;
    z-index: 10;
    position: absolute;
    top: 125px;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
}
.right{
    right: 0;
}
.canvas{
    width: 100%;
    height: 50px;
    background-color: #212121;
    opacity: 0.4;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}
.contentCircle{
    margin: auto;
    height: 50px;
    width: 100px;
}
.contentCircle li{
    display: inline-block;
    margin: 0 auto;
    border-radius: 50px;
    width: 10px;
    height: 10px;
    border: 1px solid white;
    margin-left: 4px;
    margin-top: 18px;
    cursor: pointer;
}
.activec{
    background-color: yellow;
}

var imgs = document.querySelectorAll("#contentList li");
var preImg = document.getElementById("pre")
var nextImg = document.getElementById("next")
var cricles = document.querySelectorAll("#contentCircle li");

for(var j = 0;j<cricles.length;j++){
    cricles[j].setAttribute('data-index',j)
}

var currentIndex = 0;

showImg();
//點擊上一張
preImg.addEventListener('click',function(event){
    goPre();
})

//點擊下一張
nextImg.addEventListener('click',function(event){
    goNext();
})

function goNext(){
    currentIndex ++;
    if(currentIndex == imgs.length){
        currentIndex = 0
    }
    showImg();
}

function goPre(){
    currentIndex --;
    if(currentIndex == -1){
        currentIndex = imgs.length-1
    }
    showImg();
}

//給圓點添加點擊事件   當點擊第幾個圓點時 去第幾張圖片
for(var j = 0;j<cricles.length;j++){
    cricles[j].addEventListener('click',function(event){
        currentIndex = Number(event.target.getAttribute('data-index'));
        showImg();
    })
}

//顯示圖片
function showImg(){
    for(var i = 0; i < imgs.length; i++){
        if(i === currentIndex){
            imgs[i].setAttribute('class','active')
        }else{
            imgs[i].removeAttribute('class')
        }
    }

    for(var i = 0; i < cricles.length; i++){
        if(i === currentIndex){
            cricles[i].setAttribute('class','activec')
        }else{
            cricles[i].removeAttribute('class')
        }
    }
}
//延時   每過3秒自動跳轉
setInterval(function(){
    goNext();
},3000)

3、輪播圖數據化

動態生成輪播圖，可隨意添加圖片數量，或各類型的圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="content" id="content">
        <span class="change left" id="pre">&lt;</span>
        <span class="change right" id="next">&gt;</span>
        <ul class="contentList" id="contentList">

        </ul>
        <div class="canvas">
            <ul class="contentCircle" id="contentCircle">

            </ul>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>


var imgData = {
    imgs: [
    //寫自己圖片的路徑
        {
            index: 0,
            url: './img/1.jpg',
            title: 'zxcassaf'
        },
        {
            index: 1,
            url: './img/2.jpg',
            title: 'zxdgsdfdasd'
        },
        {
            index: 2,
            url: './img/3.jpg',
            title: 'sfsdfsad'
        },
        {
            index: 3,
            url: './img/4.jpg',
            title: 'fghgfb'
        },
        {
            index: 4,
            url: './img/5.jpg',
            title: 'egfgcvcxcas'
        }
    ]
}

initLunBo(imgData);
//初始化輪播圖
function initLunBo(myImgData) {
    var contentList = document.getElementById('contentList');
    var contentCircle = document.getElementById('contentCircle');
    for (var i = 0; i < myImgData.imgs.length; i++) {
        var myli = document.createElement("li");
        var myImg = document.createElement("img");
        myImg.setAttribute('src', myImgData.imgs[i].url);
        myImg.setAttribute('titie', myImgData.imgs[i].titie);
        myImg.setAttribute('data-Index',myImgData.imgs[i].index);
        myli.appendChild(myImg);
        contentList.appendChild(myli);

        var mylic = document.createElement("li");
        contentCircle.appendChild(mylic);
    }
}

var imgs = document.querySelectorAll("#contentList li");
var preImg = document.getElementById("pre")
var nextImg = document.getElementById("next")
var cricles = document.querySelectorAll("#contentCircle li");

for (var j = 0; j < cricles.length; j++) {
    cricles[j].setAttribute('data-index', j)
}

var currentIndex = 0;

showImg();
//點擊上一張
preImg.addEventListener('click', function (event) {
    goPre();
})

//點擊下一張
nextImg.addEventListener('click', function (event) {
    goNext();
})

function goNext() {
    currentIndex++;
    if (currentIndex == imgs.length) {
        currentIndex = 0
    }
    showImg();
}

function goPre() {
    currentIndex--;
    if (currentIndex == -1) {
        currentIndex = imgs.length - 1
    }
    showImg();
}

//給圓點添加點擊事件   當點擊第幾個圓點時 去第幾張圖片
for (var j = 0; j < cricles.length; j++) {
    cricles[j].addEventListener('click', function (event) {
        currentIndex = Number(event.target.getAttribute('data-index'));
        showImg();
    })
}

//顯示圖片
function showImg() {
    for (var i = 0; i < imgs.length; i++) {
        if (i === currentIndex) {
            imgs[i].setAttribute('class', 'active')
        } else {
            imgs[i].removeAttribute('class')
        }
    }

    for (var i = 0; i < cricles.length; i++) {
        if (i === currentIndex) {
            cricles[i].setAttribute('class', 'activec')
        } else {
            cricles[i].removeAttribute('class')
        }
    }
}

setInterval(function () {
    goNext();
}, 3000)

css樣式不變

4、輪播圖組件化

將輪播圖封裝成爲組件，直接用一句話調用方便快捷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輪播圖</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="xxxxx">
    </div>
    <script src="./js/index.js"></script>
    <script>
        var imgData = {
    imgs: [
        {
            index: 0,
            url: './img/1.jpg',
            title: 'zxcassaf'
        },
        {
            index: 1,
            url: './img/2.jpg',
            title: 'zxdgsdfdasd'
        },
        {
            index: 2,
            url: './img/3.jpg',
            title: 'sfsdfsad'
        },
        {
            index: 3,
            url: './img/4.jpg',
            title: 'fghgfb'
        },
        {
            index: 4,
            url: './img/5.jpg',
            title: 'egfgcvcxcas'
        }
    ]
}
        XZLunBo.renderer("xxxxx",imgData)
    </script>
</body>
</html>

var XZLunBo = {
    currentIndex: 0,
    //渲染頁面
    renderer: function (content, myImgData) {
        this.initPage(content,myImgData);
        this.start();
    },
    start: function () {
        //由於下面用到很多  回調函數  導致多層函數  以至於用this 獲取不到想要的東西
        var that = this;
        //通過id‘pre’獲取元素
        var preImg = document.getElementById("pre")
        //通過id‘next’獲取元素
        var nextImg = document.getElementById("next")
        var cricles = document.querySelectorAll("#contentCircle li");
        //爲小圓點添加自定義屬性
        for (var j = 0; j < cricles.length; j++) {
            cricles[j].setAttribute('data-index', j)
        }

        this.showImg();
        //點擊上一張
        preImg.addEventListener('click', function (event) {
            that.goPre();
        })

        //點擊下一張
        nextImg.addEventListener('click', function (event) {
            that.goNext();
        })


        //給圓點添加點擊事件   當點擊第幾個圓點時 去第幾張圖片
        for (var j = 0; j < cricles.length; j++) {
            cricles[j].addEventListener('click', function (event) {
                that.currentIndex = Number(event.target.getAttribute('data-index'));
                that.showImg();
            })
        }

        //定時器 每過3秒切換下一張圖片
        setInterval(function () {
            that.goNext();
        }, 3000)
    },

    //初始化頁面
    initPage: function(content,myImgData){
        var content = document.getElementById(content);
        content.setAttribute('class', 'content');

        //添加span標籤的class 和 id屬性
        var left = document.createElement("span");
        left.setAttribute('class', 'change left')
        left.id = 'pre';
        left.innerText = '<'

        var right = document.createElement("span");
        right.setAttribute('class', 'change right')
        right.id = 'next';
        right.innerText = '>'

        //添加ul標籤
        var contentList = document.createElement('ul');;
        contentList.setAttribute('class', 'contentList');
        contentList.id = 'contentList';

        //添加div
        var canvas = document.createElement('div');
        canvas.setAttribute('class', 'canvas');

        //添加ul
        var contentCircle = document.createElement('ul');
        contentCircle.setAttribute('class', 'contentCircle');
        contentCircle.id = 'contentCircle';

        canvas.appendChild(contentCircle);
        content.appendChild(left);
        content.appendChild(right);
        content.appendChild(contentList);
        content.appendChild(canvas);

        //添加圖片和小圓點
        var contentList = document.getElementById('contentList');
        var contentCircle = document.getElementById('contentCircle');
        for (var i = 0; i < myImgData.imgs.length; i++) {
            var myli = document.createElement("li");
            var myImg = document.createElement("img");
            myImg.setAttribute('src', myImgData.imgs[i].url);
            myImg.setAttribute('titie', myImgData.imgs[i].titie);
            myImg.setAttribute('data-Index', myImgData.imgs[i].index);
            myli.appendChild(myImg);
            contentList.appendChild(myli);

            var mylic = document.createElement("li");
            contentCircle.appendChild(mylic);
        }
    },

    //去下一張
    goNext: function () {
        var imgs = document.querySelectorAll("#contentList li");
        this.currentIndex++;
        if (this.currentIndex == imgs.length) {
            this.currentIndex = 0
        }
        this.showImg();
    },

    //去上一張
    goPre: function () {
        var imgs = document.querySelectorAll("#contentList li");
        this.currentIndex--;
        if (this.currentIndex == -1) {
            this.currentIndex = imgs.length - 1
        }
        this.showImg();
    },

    //顯示圖片
    showImg: function () {
        var imgs = document.querySelectorAll("#contentList li");
        for (var i = 0; i < imgs.length; i++) {
            //===  與 == 的區別
            //===   連同數據類型和值一同進行比較
            //==    只比較值
            if (i === this.currentIndex) {
                imgs[i].setAttribute('class', 'active')
            } else {
                imgs[i].removeAttribute('class')
            }
        }

        var cricles = document.querySelectorAll("#contentCircle li");
        for (var i = 0; i < cricles.length; i++) {
            if (i === this.currentIndex) {
                cricles[i].setAttribute('class', 'activec')
            } else {
                cricles[i].removeAttribute('class')
            }
        }
    }

}

帶你手擼一個輪播圖從簡單→組件化的實現

輪播圖簡單實現

1、開始步驟

2、簡單實現輪播圖

3、輪播圖數據化

4、輪播圖組件化

學習Java不迷茫一張Java思維導圖送於你

看完這篇還不會AJAX,我就.....

你會在CentOS中安裝MySQL嗎？

MySQL知識梳理總結

帶你理解面向過程與面向對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

帶你手擼一個輪播圖 從簡單→組件化的實現

輪播圖簡單實現

1、開始步驟

2、簡單實現輪播圖

3、輪播圖 數據化

4、輪播圖 組件化

帶你手擼一個輪播圖從簡單→組件化的實現

3、輪播圖數據化

4、輪播圖組件化