原生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++){      //遍历每一个sapnif( 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上，可能会造成全局变量污染。

转载于:https://www.cnblogs.com/crushxz/p/11341005.html