原生JavaScript（js）手把手教你写轮播图插件（banner）

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上，可能会造成全局变量污染。