原生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%;
         100%;
    }
    #banner{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
         300px;
        height:200px;
        /*  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上，可能会造成全局变量污染。