原生JavaScript(js)手把手教你写轮播图插件(banner)

时间:2022-10-25 04:31:56

---恢复内容开始---

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.完成要使用的那个函数

首先,插件分为两部分:图片展示区和下面的圆点区

原生JavaScript(js)手把手教你写轮播图插件(banner)

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