實現通用輪播圖插件

原創 续木 2020-07-05 13:08 
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #banner {
                width: 533px;
                height: 300px;
                outline: 10px solid #fff666;
                margin: 0 auto;

            }
        </style>
    </head>

    <body>
        <div id="banner">

        </div>
        <script src="./demo.js"></script>
        <script>
            var bannerDiv = document.getElementById("banner");
            createBannerArea(bannerDiv, [{
                imgurl: "./imge/5d734abfdd0e92fa29f402056fc4560c.jpg"
            },
            {
                imgurl: "./imge/5fee9229ca1f6274651495b51f1e8187.jpg"
            },
            {
                imgurl: "./imge/aa988a78864d1f98ca563e5298ce7f93 (1).jpg"
            }
            ])
        </script>
    </body>

</html>

/**
 * 
 * @param {*} areaDom dom元素，輪播區域
 * @param {*} options 輪播配置
 */

function createBannerArea(areaDom, options) {
    var imgArea = document.createElement('div'); //圖片區域
    var numberArea = document.createElement('div'); //角標
    var curIndex = 0; //圖片顯示的第幾張
    var changeTimer = null; //角標定時器
    var changeDuration = 3000; //圖片切換定時器時間
    var timer = null; //圖片定時器
    //創建圖片區域
    initImge();

    //角標區域
    inittNumbers();

    //設置狀態
    setStatus();

    autoChange();

    //插入圖片和樣式
    function initImge() {
        imgArea.style.wdith = '100%';
        imgArea.style.height = '100%';
        imgArea.style.display = 'flex';
        imgArea.style.overflow = 'hidden';
        for (var i = 0; i < options.length; i++) { //循環創建
            var obj = options[i];
            var img = document.createElement('img')
            img.src = obj.imgurl;
            img.style.wdith = '100%';
            img.style.height = '100%';
            img.style.marginLeft = '0';
            img.style.cursor = 'pointer';
            img.addEventListener('click', function () { //圖片鏈接事件
                location.herf = options[i].link;
            })
            imgArea.appendChild(img); //插入

        }
        imgArea.addEventListener('mouseenter', function () { //鼠標懸浮和離開時候的運動停止和開始
            clearInterval(changeTimer);
            changeTimer = null;
        })
        imgArea.addEventListener('mouseleave', function () {
            autoChange();
        })
        areaDom.appendChild(imgArea); //再插入
    }
    //加入角標
    function inittNumbers() {
        numberArea.style.textAlign = 'center';
        numberArea.style.marginTop = '-25px';
        for (let i = 0; i < options.length; i++) {
            var sp = document.createElement('span');
            sp.style.width = '12px';
            sp.style.height = '12px';
            sp.style.background = 'lightgray';
            sp.style.display = 'inline-block';
            sp.style.margin = '0 7px';
            sp.style.borderRadius = '50%';
            sp.style.cursor = 'pointer';
            sp.addEventListener('click', function () { //角標點擊事件
                curIndex = i; //更改值
                setStatus(); //進行再運動
            })
            numberArea.appendChild(sp); //插入

        }
        areaDom.appendChild(numberArea); //再插入
    }

    //區域狀態
    function setStatus() {
        //角標
        for (var i = 0; i < options.length; i++) {
            if (i === curIndex) { //x選中
                numberArea.children[i].style.background = '#be926f'
            } else { //普通狀態
                numberArea.children[i].style.background = 'lightgray'

            }

        }
        //圖片切換運動
        var start = parseInt(imgArea.children[0].style.marginLeft); //當前元素外邊距
        // console.log(start);
        var end = curIndex * -100; //要達到的邊距
        var dis = end - start; //要運動的邊距
        var duration = 500;
        var speed = dis / duration; //取得速度

        if (timer) {
            clearInterval(timer); //判斷存在
        }
        timer = setInterval(function () { //賦值
            start += speed * 20;
            imgArea.children[0].style.marginLeft = start + '%';
            if (Math.abs(end - start) < 1) {
                imgArea.children[0].style.marginLeft = end + '%';
                clearInterval(timer); //清除
            }
        }, 20);



    }


    //運動定時器
    function autoChange() {
        if (changeTimer) { //判斷存在
            return;
        }
        changeTimer = setInterval(function () {
            if (curIndex === options.length - 1) {
                curIndex = 0;
            } else {
                curIndex++;
            }
            setStatus();
        }, changeDuration);
    }


}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

在MySQL中基本認爲schema和數據庫相同，也就是說schema的名稱和數據庫的實例的名稱相同，一個數據庫有一個schema。

  在SQL環境下，schema就是數據庫對象的集合，所謂的數據庫對象也就是常說的表，索引，視圖，存儲過程等。 在schema之上的，就是數據庫的實例，也就是通常create databases獲得的東西。也就是說一個schema 實例

一朵风中摇曳的水仙花 2020-07-08 00:43:38

Flink DataSet partitionByRange sortPartition 用法 實例

package DataSetPartitionTest1; import org.apache.flink.api.common.functions.MapFunction; import org.apache.flink.api.

二十六画生的博客 2020-07-07 23:55:04

從0自學C#09--抽象工廠模式實例

抽象工廠模式(Abstract Factory) 1.適用環境 （主要是用在生產製造多種產品，軟件有多種皮膚，多種數據庫等環境） 一個系統不應當依賴於產品類實例如何被創建、組合和表達的細節，這對於所有類型的工廠模式都是重要的。

tclxspy 2020-07-07 22:38:42

—— Roman to Integer

13、Roman to Integer 羅馬數字轉整數 給定一個羅馬數字，將其轉換成整數。 返回的結果要求在1到3999的範圍內。 樣例 IV -> 4 XII -> 12 XXI -> 21 XCIX -> 99 代碼： c

叙狼烟 2020-07-07 16:59:23

——Letter Combinations of a Phone Number

17、Letter Combinations of a Phone Number 電話號碼的字母組合 給定一個數字字符串,返回所有可能的字母組合,可以代表。 一個映射的數字字母(就像在電話裏按鈕)如下所示。  注意事項

叙狼烟 2020-07-07 16:59:23

——3Sum Closest

16、3Sum Closest 最接近的三數之和 給一個包含 n 個整數的數組 S, 找到和與給定整數 target 最接近的三元組，返回這三個數的和。  注意事項 只需要返回三元組之和，無需返回三元組本身 樣例

叙狼烟 2020-07-07 16:59:23

十三、學習分佈式爬蟲之字體反爬

字體反爬 字體反爬原理 網頁開發者自己創造一種字體，因爲在字體中每個文字都有其代號，那麼以後在網頁中不會直接顯示這個文字的最終的效果，而是顯示他的代號，因此即使獲取到了網頁中的文本內容，也只是獲取到文字的代號，而不是文字本身。

Mr_Little_li 2020-07-06 17:47:01

十四、學習分佈式爬蟲之Scrapy

Scrapy框架 學習目標 理解scrapy框架。 學會spider爬蟲的編寫。 學會Crawlspider爬蟲編寫。 學會中間件的編寫。 學會pipeline保存數據。 學會將Scrapy結合selenium一起使用。 學會在

Mr_Little_li 2020-07-06 17:47:01

裝箱、拆箱以及Math類

import java.util.Random; import java.util.Scanner; public class IntegerTes

__0625 2020-07-05 19:00:06

發現了個UML類圖的關係的更詳細的文章

UML類圖關係大全 1、關聯 雙向關聯： C1-C2：指雙方都知道對方的存在，都可以調用對方的公共屬性和方法。 在GOF的設計模式書上是這樣描述的：雖然在分析階段這種關係是適用的，但我們覺得它對於描述設計模式內的類關係來說顯得太抽象了

BBOOT 2020-07-05 17:52:47

Js實現動態時鐘

獲取日期字符 添加日期對應結構運動 數值顯示動態透明度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

续木 2020-07-05 13:08:30

原生Js實現踩白塊

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

续木 2020-07-05 13:08:19

js 利用canvas標籤畫一個存儲按鈕（附加svg動態按鈕）

利用canvas畫一個存儲按鈕（附加svg動態按鈕） 實例： <html> <head> <meta http-equiv="content-type" content="text/html charset

csmzl 2020-07-05 10:25:46

SQL新建存儲過程的入門級方法

SQL新建存儲過程的入門級方法 1. 新建數據庫myFirstdb（自己定義的數據庫名稱）：   手動新建：右鍵數據庫，選擇新建數據庫，填寫數據庫名稱：myFirstdb，然後單擊確定。刷新數據庫即可看見新建的數據庫。   代

csmzl 2020-07-05 10:25:45

arm驅動程序——按鍵程序1（韋東山的視頻總結及針對linux-2.6.30）

相關代碼在資源中下載。 按鍵程序是以中斷方式寫的，至於中斷的內核相關的知識看中斷框架和註冊一節， 所用到的函數和結構： /*用來註冊中斷*/ /*irq:中斷號，handler：中斷處理函數，flags:中斷觸發方式，  *name:中斷

默默耕田人 2020-07-05 04:49:51