原生JavaScript（js）手把手教你寫輪播圖插件（banner）

---恢復內容開始---

1.輪播圖插件

1.什么是插件：

為已有的程序增加功能

2.插件的特點（為什么要做成一個插件）與注意事項：

1.通用性，可移植性強

2.兼容性：不會對其他代碼產生影響

3.創建一個div,給一個基礎的寬高屬性

outline: 外邊框；不會占據盒子空間

border：內邊框

盒模型：外邊距 - 邊框（border會占據空間） - 內邊距 - 內容

 

輪播圖插件的實現：

1.插件：

html部分最好只有一個外部的div，確定他在頁面中的位置和大小。其余的部分都靠js里面的部分來完成；--------方便使用的人；

<div id="banner">
​
    </div>

2.通過一個script src引入js部分

3.在頁面中執行這個函數；

函數中的參數是頁面中的div元素和我輪播圖畫面有關的東西

如果有多張圖片記得要寫成一個數組的形式，里面的每個元素都是一個對象

注意，執行函數的部分一定要寫在創建函數的script后面，不然會報錯

Uncaught ReferenceError: createBannerArea is not defined

4.完成要使用的那個函數

首先，插件分為兩部分：圖片展示區和下面的圓點區

1.主函數

在js中createElement兩個div分別來裝他們

部分主函數：

function createBannerArea(areaDom, options){ 
    var imgArea = document.createElement('div');    //初始化圖片區
    var numberArea = document.createElement('div')  //初始化圓點區
}

 

areaDom:我在html頁面中獲取的元素；

options：一些配置（我傳入的圖片等信息）---以數組的形式排列

2.局部函數

1.圖片的初始化以及事件：

​

   function initImgs(){
        imgArea.style.height ='100%';
        imgArea.style.width = '100%';
        imgArea.style.display = 'flex';
        imgArea.style.overflow = 'hidden';
        for(let i = 0; i < options.length ; i++){ //遍歷options里面的每個元素，知道圖片張數
            var obj = options[i];        //方便獲取圖片的屬性
            var img = document.createElement('img');  //生成img元素
            img.src = obj.imgUrl;        //獲取圖片對象的信息
            imgArea.appendChild(img);    //img作為imgArea的子元素
            img.style.height = '100%';   //設置img元素的寬高等
            img.style.width = '100%';
            img.style.marginLeft = '0px';
            img.addEventListener('click',function(){      //給圖片一個點擊事件
                location.href = options[i].link;
            })
            // console.log(obj);
        }
        imgArea.addEventListener('mouseenter',function(){  //鼠標進出入圖片的事件
            clearInterval(changeTimer);
            changeTimer = null;
        })
        imgArea.addEventListener('mouseleave',function(){
            autoChange();
        })
        areaDom.appendChild(imgArea)        //imgArea元素是areaDom的子元素
    }

 

 

2.小圓點的初始化以及事件

function initNumbers(){
        numberArea.style.textAlign = 'center';
        numberArea.style.marginTop = '-20px'
        for(var i = 0; i < options.length; i++){       //遍歷小圓點
            var sp = document.createElement('span');   //每個圓點都是一個span元素
            sp.style.cursor = 'pointer';                //小圓點的樣式
            sp.style.display = 'inline-block';
            sp.style.height = '8px';
            sp.style.width = '8px';
            sp.style.background = 'white';
            sp.style.borderRadius = '50%';
            sp.style.margin = '5px 5px';
            (function(index){           //立即執行函數，使得點擊的圓點顯示的是對應的圖片
                sp.addEventListener('click',function(){
                    curIndex = index;
                    setSatus();
                })
            })(i);
            numberArea.append(sp);      //span元素是numberArea的子元素
​
        }
        areaDom.appendChild(numberArea)    //number元素是areaDom的子元素
    }

 

3.初始狀態和事件的設置

function setSatus(){
        for(var i = 0; i < numberArea.children.length; i++){      //遍歷每一個sapn
            if( i == curIndex){         //判斷是否是當前的索引
                numberArea.children[i].style.background = '#336699' //是的畫span顯示一種顏色
            }else{
                numberArea.children[i].style.background = 'white'   //不是顯示另一種顏色
            }
        }
        var start = parseInt(imgArea.children[0].style.marginLeft);//開始時左邊的margin值
        var end = curIndex * -100;    //目標margin-left的值
        var dis = end - start;        //兩者間的距離
        var duration = 500;           //切換兩者間的時間
        var speed = dis / duration;   //切換的速度
        if(timer){
            clearInterval(timer);     //如果我點擊圓點的時候有定時，及時清除
        }
        var timer = setInterval(function(){    
            start += 20 * speed;       //Margin left的變化
            imgArea.children[0].style.marginLeft = start + '%';   //img的變化
            if(Math.abs(end - start) < 1){      //當變化后的像素小於1像素以后，直接切換到准確的值
                imgArea.children[0].style.marginLeft = end + '%';
                clearInterval(timer);          //每變化一次，清理一次定時器
            }
        },20)       //每隔20毫秒改變一次

 

4.圖片自動輪播的設置

function autoChange(){
        if(changeTimer) {  
            return} ;
       changeTimer = setInterval(function(){
            if(curIndex == options.length -1){    
                //如果切換的curIndex是最后一張圖片了，那么下一張是第一張
                curIndex = 0;
            }else{
                curIndex++;       //否則自增
            }
            
            setSatus();
        }, changeDuration);    //自動切換的事件
    }

 

4.完整HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>banner</title>
</head>
<style>
    html,body{
        height: 100%;
        width: 100%;
    }
    #banner{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 300px;
        height:200px;
        /* width: 63%;
        height: 50%; */
        /* border: 10px solid #ccc; */
        outline: 2px solid rgb(211, 103, 103)
    }
</style>
<body>
    <div id="banner">
​
    </div>
    <script src="./plugin/banner.js"></script>
    <script>
        var bannerDiv = document.getElementById('banner');
        createBannerArea(bannerDiv,[
            {imgUrl:'./plugin/img/banner1.jpg',link:'http://www.baidu.com'},
            {imgUrl:'./plugin/img/banner2.jpg',link:'http://www.taobao.com'},
            {imgUrl:'./plugin/img/banner3.jpg',link:'http://www.jingdong.com'}
        ])
        
        
    
    </script>
</body>
</html>

 

5.完整js

​

/**
 * 
 * @param {*} areaDom 輪播圖區域
 * @param {*} options  輪播圖配置
 */
function createBannerArea(areaDom, options){
    var imgArea = document.createElement('div');
    var numberArea = document.createElement('div')
    var curIndex = 2;
    var changeTimer = null;
    var changeDuration = 1000;
    var timer = 0;
​
    initImgs();
    initNumbers();
    setSatus();
    autoChange();
​
    function initImgs(){
        imgArea.style.height ='100%';
        imgArea.style.width = '100%';
        imgArea.style.display = 'flex';
        imgArea.style.overflow = 'hidden';
        for(let i = 0; i < options.length ; i++){
            var obj = options[i];
            var img = document.createElement('img');
            img.src = obj.imgUrl;
            imgArea.appendChild(img);
            img.style.height = '100%';
            img.style.width = '100%';
            img.style.marginLeft = '0px';
            img.addEventListener('click',function(){
                location.href = options[i].link;
            })
            // console.log(obj);
        }
        imgArea.addEventListener('mouseenter',function(){
            clearInterval(changeTimer);
            changeTimer = null;
        })
        imgArea.addEventListener('mouseleave',function(){
            autoChange();
        })
        areaDom.appendChild(imgArea)
    }
    
    function initNumbers(){
        numberArea.style.textAlign = 'center';
        numberArea.style.marginTop = '-20px'
        for(var i = 0; i < options.length; i++){
            var sp = document.createElement('span');
            sp.style.cursor = 'pointer';
            sp.style.display = 'inline-block';
            sp.style.height = '8px';
            sp.style.width = '8px';
            sp.style.background = 'white';
            sp.style.borderRadius = '50%';
            sp.style.margin = '5px 5px';
            (function(index){
                sp.addEventListener('click',function(){
                    curIndex = index;
                    setSatus();
                })
            })(i);
            numberArea.append(sp);
​
        }
        areaDom.appendChild(numberArea)
    }
​
    function setSatus(){
        for(var i = 0; i < numberArea.children.length; i++){
            if( i == curIndex){
                numberArea.children[i].style.background = '#336699'
            }else{
                numberArea.children[i].style.background = 'white'
            }
        }
        var start = parseInt(imgArea.children[0].style.marginLeft);
        var end = curIndex * -100;
        var dis = end - start;
        var duration = 500;
        var speed = dis / duration;
        if(timer){
            clearInterval(timer);
        }
        var timer = setInterval(function(){
            start += 20 * speed;
            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(() => {
            if(curIndex == options.length -1){
                curIndex = 0;
            }else{
                curIndex++;
            }
            
            setSatus();
        }, changeDuration);
    }
​
   
}
​
//全局函數
​
// 附着在window上，可能會造成全局變量污染。