JavaScript中怎么實現一個動態輪播圖效果

這期內容當中小編將會給大家帶來有關JavaScript中怎么實現一個動態輪播圖效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

具體實現代碼：

1.鼠標移入左右側箭頭顯示，鼠標離開箭頭隱藏

con.addEventListener('mouseenter', function() {    arrow_l.style.display = 'block';  // 將左右箭頭的display設為block    arrow_r.style.display = 'block';});con.addEventListener('mouseleave', function() {    arrow_l.style.display = 'none';  // 將左右箭頭display設為none    arrow_r.style.display = 'none';});

2.動態添加底部小圓圈并綁定單擊事件，并且讓小圓圈的點擊事件和左右箭頭點擊事件同步

 for(var i = 0; i < ul.children.length; i++) {    var li = document.createElement('li');    li.setAttribute('index', i);  // 通過添加自定義屬性來記錄小圓圈索引號    ol.appendChild(li);      // 將創建的li添加進ol里    // 生成小圓圈的同時就可以給它綁定單擊事件    li.addEventListener('click', function() {        // 排他思想 干掉所有人，留下我自己        for(var i = 0; i < ol.children.length; i++) {  // 先把所有的小圓圈改為未選中狀態            ol.children[i].className = '';        }        // 再把當前小圓圈改為選中狀態        this.className = 'current';        var index = this.getAttribute('index');  // 獲取當前小圓圈的索引        // 將index值賦值給num以及circle，將小圓圈的點擊事件和左右箭頭點擊事件同步        num = index;        circle = index;        animate(ul, - index * conWidth);    })}

3.拷貝第一張圖片添加到ul最后可以實現動態添加圖片

// 克隆第一張圖片var first = ul.children[0].cloneNode(true); // true 深拷貝ul.appendChild(first); // 拷貝第一張圖片添加到ul最后

4.給箭頭綁定單擊事件，并且使圖片可以無縫輪播

①右側箭頭的單擊事件

var num = 0;    // 用來存儲點擊后圖片序號var circle = 0;   // 用來存儲點擊后小圓圈序號var flag = true;   // flag 節流閥 防止用戶點擊過快 圖片播放太快// 右側箭頭點擊播放arrow_r.addEventListener('click', function() {    if(flag) {        // 點擊后先關閉節流閥        flag = false;        // 如果播放到了最后一張，就把left直接值設為0從頭播放，同時還原num        if(num == ul.children.length - 1) {            ul.style.left = 0;            num = 0;        }        num++;        animate(ul, - num * conWidth, function() {            // 回調函數 動畫執行完后開啟節流閥            flag = true;        });        // 小圓圈和箭頭一起變化        circle++;        /* if(circle == ol.children.length) {              circle = 0;           } */        // 可以用三元運算符判斷小圓圈是否到了最后一個，如果是最后一個就還原circle        circle == ol.children.length ? circle = 0 : circle;        circleChange();   // 使當前小圓圈為選中狀態（重復代碼封裝到一個函數里了）    }})

②左側箭頭的單擊事件

arrow_l.addEventListener('click', function() {    if(flag) {        // 首先關閉節流閥        flag = false;        // 如果播放到了第一張，就把left值設為最后一張的值        if(num == 0) {            num = ul.children.length - 1;            ul.style.left = - num * conWidth + 'px';        }        num--;        animate(ul, - num * conWidth, function() {            flag = true;        });        // 小圓圈和箭頭一起變化         circle--;        // 三元表達式   circle < 0 時說明是第一張圖片，將小圓圈改為第四個（索引為3）        circle < 0 ? circle = ol.children.length - 1 : circle;        circleChange();    }})

circleChange();函數代碼

// 小圓圈的選中狀態（相同代碼可以封裝為一個函數，使代碼更簡潔）function circleChange() {    // 排他思想    for(var i = 0; i < ol.children.length; i++) {        ol.children[i].className = '';    }    ol.children[circle].className = 'current';}

5.實現自動輪播（動畫函數）

// 自動播放輪播圖，相當于隔一段時間調用一次右側箭頭點擊事件 var timer = setInterval(function() {     // 手動調用點擊事件     arrow_r.click();}, 2000);

動畫函數 animate.js（ps：我沒有把這個寫入下邊index.js里，這個要你自己弄進去哦，可以作為animate.js文件引入進去或者直接粘貼到你的js代碼里邊）

// obj 動畫對象// target 目標位置// callback 回調函數function animate(obj, target, callback) {    clearInterval(obj.timer);    obj.timer = setInterval(function() {        var step = (target - obj.offsetLeft) / 10;  // step步長值        step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整        if(obj.offsetLeft == target) {            clearInterval(obj.timer);            // if(callback) { // 判斷是否傳了回調函數            //     callback(); // 回調函數，當動畫執行完后才執行            // }            // &&是短路運算符，存在callback時才會繼續執行callback()            callback && callback();        }        obj.style.left = obj.offsetLeft + step + 'px';    }, 15)}

具體實現代碼如下：

HTML代碼：

<div class="con">    <i class="icon iconfont iconarrow_left arrow-l"></i>    <i class="icon iconfont iconarrow_right arrow-r"></i>    <ul>        <li>            <a href="javascript:;"><img src="images/img1.jpg" alt=""></a>        </li>        <li>            <a href="javascript:;"><img src="images/img2.jpg" alt=""></a>        </li>        <li>            <a href="javascript:;"><img src="images/img3.jpg" alt=""></a>        </li>        <li>            <a href="javascript:;"><img src="images/img4.jpg" alt=""></a>        </li>        <li>            <a href="javascript:;"><img src="images/img5.jpg" alt=""></a>        </li>    </ul>    <ol>    </ol></div>

ps: 我左右側小箭頭是使用的Iconfont圖標（iconarrow_left，iconarrow_right），要引入進去

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">

CSS代碼：

<style>    * {        margin: 0;        padding: 0;    }    ul,li,ol,a {        list-style: none;        text-decoration: none;    }    .con {        width: 533px;        height: 300px;        margin: 100px auto;        position: relative;        background-color: #f0f0f0;        overflow: hidden;    }    .arrow-l,.arrow-r{        display: none;        width: 20px;        height: 40px;        line-height: 40px;        text-align: center;        color: #eee;        position: absolute;        top: 45%;        background-color: rgba(0, 0, 0, 0.2);        z-index: 2;        cursor: pointer;    }    .arrow-l {        left: 0;    }    .arrow-r{        right: 0;    }    ul {        position: absolute;        width: 600%;    }    ul li {        float: left;    }    ul li img {        width: 533px;        height: 300px;    }    ol {        position: absolute;        left: 50%;        bottom: 8px;        -webkit-transform: translateX(-50%);        transform: translateX(-50%);    }    ol li {        float: left;        width: 6px;        height: 6px;        margin: 0 2px;        border-radius: 50%;        border: 2px solid rgba(255, 255, 255, 0.5);        cursor: pointer;    }    .current {        background-color: #ffe;    }</style>

詳細JavaScript代碼（index.js）

 window.addEventListener('load', function() {   // 等頁面加載完畢    // 獲取需要用到的的元素    var arrow_l = document.querySelector('.arrow-l');    var arrow_r = document.querySelector('.arrow-r');    var con = document.querySelector('.con');    var conWidth = con.offsetWidth;    // 鼠標經過箭頭顯示，鼠標離開箭頭隱藏    con.addEventListener('mouseenter', function() {        arrow_l.style.display = 'block';  // 將左右箭頭的display設為block        arrow_r.style.display = 'block';        // 鼠標經過停止定時器        clearInterval(timer);        timer = null; // 釋放定時器變量    });    con.addEventListener('mouseleave', function() {        arrow_l.style.display = 'none';  // 將左右箭頭display設為none        arrow_r.style.display = 'none';        // 鼠標離開再重新開啟定時器        timer = setInterval(function() {            // 手動調用點擊事件            arrow_r.click();  // 自動輪播        }, 2000);    });        var ul = con.querySelector('ul');    var ol = con.querySelector('ol');    // 動態添加底部小圓圈    for(var i = 0; i < ul.children.length; i++) {        var li = document.createElement('li');        // 通過添加自定義屬性來記錄小圓圈索引號        li.setAttribute('index', i);        ol.appendChild(li);        // 生成小圓圈的同時就可以給它綁定單擊事件        li.addEventListener('click', function() {            // 排他思想 干掉所有人，留下我自己            for(var i = 0; i < ol.children.length; i++) {  // 先把所有的小圓圈改為未選中狀態                ol.children[i].className = '';            }            // 再把當前小圓圈改為選中狀態            this.className = 'current';            var index = this.getAttribute('index');  // 獲取當前小圓圈的索引            // 將index值賦值給num以及circle，將小圓圈的點擊事件和左右箭頭點擊事件同步            num = index;            circle = index;            animate(ul, - index * conWidth);        })    }    // 讓第一個小圓圈底色為白色（選中狀態）    ol.children[0].className = 'current';    // 克隆第一張圖片    var first = ul.children[0].cloneNode(true);  // true 深拷貝    ul.appendChild(first); // 拷貝第一張圖片添加到ul最后    var num = 0;    // 用來存儲點擊后圖片序號    var circle = 0;   // 用來存儲點擊后小圓圈序號    var flag = true;   // flag 節流閥 防止用戶點擊過快 圖片播放太快    // 右側箭頭點擊播放    arrow_r.addEventListener('click', function() {        if(flag) {            // 點擊后先關閉節流閥            flag = false;            // 如果播放到了最后一張，就把left直接值設為0從頭播放，同時還原num            if(num == ul.children.length - 1) {                ul.style.left = 0;                num = 0;            }            num++;            animate(ul, - num * conWidth, function() {                // 回調函數 動畫執行完后開啟節流閥                flag = true;            });            // 小圓圈和箭頭一起變化            circle++;            /* if(circle == ol.children.length) {                  circle = 0;               } */            // 可以用三元運算符判斷小圓圈是否到了最后一個，如果是最后一個就還原circle            circle == ol.children.length ? circle = 0 : circle;            circleChange();   // 使當前小圓圈為選中狀態        }    })    // 左側箭頭點擊播放    arrow_l.addEventListener('click', function() {        if(flag) {            // 關閉節流閥            flag = false;            // 如果播放到了第一張，就把left值設為最后一張的值            if(num == 0) {                num = ul.children.length - 1;                ul.style.left = - num * conWidth + 'px';            }            num--;            animate(ul, - num * conWidth, function() {                flag = true;            });            // 小圓圈和箭頭一起變化             circle--;            // circle < 0 時說明是第一張圖片，將小圓圈改為第四個（索引為3）            if(circle < 0) {                circle = ol.children.length - 1;            }            circleChange();        }    })    // 小圓圈的選中狀態（相同代碼可以封裝為一個函數，使代碼更簡潔）    function circleChange() {        // 排他思想        for(var i = 0; i < ol.children.length; i++) {            ol.children[i].className = '';        }        ol.children[circle].className = 'current';    }    // 自動播放輪播圖，相當于隔一段時間調用一次右側箭頭點擊事件    var timer = setInterval(function() {        // 手動調用點擊事件        arrow_r.click();    }, 2000);})

上述就是小編為大家分享的JavaScript中怎么實現一個動態輪播圖效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。