轮播图方法，原型链上编程
程序员文章站
2022-03-13 07:58:36
自动生成轮播图相当于在数组的对象里面增加一个地址就会多一张图片（我是小白，写的差请多多包涵，运用了之前的一些框架然后组成了一个自动的框架）html代码 &l...
自动生成轮播图
相当于在数组的对象里面增加一个地址就会多一张图片（我是小白，写的差请多多包涵，运用了之前的一些框架然后组成了一个自动的框架）
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<script src="./js/tool.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
- 这里我只写了css文件和引入了两个js的文件，我准备把所有的标签都在js里面自动生成，虽然这样会频繁的调动dom结构
一下是css代码
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.bannerBox{
overflow: hidden;
width: 800px;
height: 400px;
border: 1px solid black;
margin: 40px auto;
position: relative;
}
.ulBox{
width: 99999px;
height: 400px;
position: absolute;
left: 0;
}
.ulBox a{
float: left;
}
.ulBox a li img{
width: 800px;
height: 400px;
}
.bannerBox .lf{
width: 50px;
height: 50px;
position: absolute;
background-image: url(../imager/left.png);
background-size: 100% 100%;
left: 0;
top:170px;
cursor: pointer;
}
.bannerBox .rg{
width: 50px;
height: 50px;
position: absolute;
background-image: url(../imager/right.png);
background-size: 100% 100%;
right: 0;
top: 170px;
cursor: pointer;
}
.bannerBox .syBox{
width: 300px;
height: 20px;
position: absolute;
left: 235px;
bottom: 30px;
}
.bannerBox .syBox span{
width: 20px;
height: 20px;
float: left;
margin-left:20px;
border: 1px solid black;
border-radius: 50%;;
cursor: pointer;
}
.indexA{
background: black;
}
- 这里是我写的轮播图的样式，我写的相当于是会自动的添加动画和效果，样式还是需要css来写的，我准备用js来调用这些样式。（还是很耗效率）css比较简单我就不过多阐述了。
//这是在全局的数组，这是核心代码，用来生成标签的基础
var arrBanner = [
//每一个src就相当于代表着一张图片
{src : './imager/1.jpg'},
{src : './imager/2.jpg'},
{src : './imager/3.jpg'},
{src : './imager/4.jpg'},
{src : './imager/5.jpg'},
{src : './imager/1.jpg'}
//至于为什么要多一个{src : './imager/1.jpg'}，相当于在移动到最后一张图片的时候让他的位置变为0，就是第一张
]
//这是在数组原型上写了一个方法
Array.prototype.banner = function(box){
//初始变量值
//下面小圆点索引
var index = 0;
//字符串拼接生成标签
var innerHTML = '';
//清除定时器
var timer = null;
//加锁，防止定时器冲突
var key = true;
//生成元素
var oDivBox = document.createElement('div');//这是最大的box，整个盒子用来包banner的
var leFt = document.createElement('span');//左边按钮
var rigHt = document.createElement('span');//右边按钮
var oUl = document.createElement('ul');//生成ul
var syBox = document.createElement('div')//生成索引位盒子
oUl.setAttribute('class','ulBox');//
leFt.setAttribute('class','lf');//
rigHt.setAttribute('class','rg');//都是给创建好的元素加class类名
oDivBox.setAttribute('class','bannerBox');//
syBox.setAttribute('class','syBox');//
oDivBox.appendChild(oUl);//大盒子插入ul标签
oDivBox.appendChild(leFt);//大盒子插入左按钮
oDivBox.appendChild(rigHt);//大盒子插入右按钮
oDivBox.appendChild(syBox);//大盒子插入索引位盒子
var boDy = document.getElementsByTagName('body')[0];//获取Body
//遍历数组，字符串拼接插入标签方法
//数组 索引位 数组集合
box.forEach(function(ele,index,self){
//数组的forEach方法
innerHTML += '<a href=""><li><img src="' + ele.src + '"></li></a>'
//让ul标签里面的内容等于插入的字符串然后变为标签
oUl.innerHTML = innerHTML;
})
//这些都生成好之后将这个banner盒子插入到页面里面去
boDy.appendChild(oDivBox);
//获取当前的ul里面的所有a标签
var myA = oUl.getElementsByTagName('a');
//获取当前ul的宽度也就是轮播图的宽度
var movewidth = oUl.children[0].offsetWidth;
//我准备生成索引位的按钮只要5个所以要让他-1
var myAlen = myA.length - 1;
//遍历a标签生成span按钮的方法
for(var i = 0; i < myAlen; i ++){
//生成Span标签
var mySpan = document.createElement('span');
//将span标签插入到索引位盒子中
syBox.appendChild(mySpan);
}
//拿到索引位按钮组
var oSpan = syBox.getElementsByTagName('span');
//初始化让开始的时候第一个按钮的样式是黑色
oSpan[0].className = 'indexA'
//动画样式
function aoutMove(fx){
//每次执行的时候先清除上一个定时器
clearTimeout(timer)
//如果锁是开着的我就执行当前动画，如果没开，就等上一个动画执行完之后再开锁
if(key == true){
//执行当前动画的时候将锁关掉
key = false;
//判断，如果按钮点击是右按钮就执行自左向右轮播
if(!fx || fx == "left>right"){
//索引位+1
index ++;
//执行动画方法
startMove(oUl,{left :oUl.offsetLeft - movewidth},
//回调函数
function(){
//如果oul到边界了就是最后一张轮播的位置
if(oUl.offsetLeft == -myAlen * movewidth){
index = 0;
//让索引位第一个按钮
//让轮播图的位置变为0
oUl.style.left = 0 + 'px';
}
//执行索引位按钮的样式方法
changIndex(index)
//给定时器加清除的样式
timer = setTimeout(aoutMove,1500);
//让锁打开因为动画已经执行完了
key = true;
})
//如果是点击的自又向左按钮
}else if(fx == "right>left"){
//先判断你是不是第一张轮播图
if(oUl.offsetLeft == 0){
//如果是的话让你轮播图的位置等于最后一张轮播图的位置
oUl.style.left = -myAlen * movewidth + 'px';
//让索引位也等于最后一个按钮
index = myAlen;
}
//每一次执行动画的时候索引位-1
index --;
//动画方法
startMove(oUl,{left: oUl.offsetLeft + movewidth},
function(){
//执行索引位按钮的样式方法
changIndex(index);
//给定时器加清除的样式
timer = setTimeout(aoutMove,1500);
//让锁打开因为动画已经执行完了
key = true;
})
}
}
}
//初始化定时器
setTimeout(aoutMove,1500)
//自右向左按钮
leFt.onclick = function(){
aoutMove('right>left');
}
//自左向右按钮
rigHt.onclick = function(){
aoutMove('left>right');
}
//索引位按钮样式方法
function changIndex(_index){
for(var i = 0; i < oSpan.length; i ++){
//将当前所有的按钮样式清空
oSpan[i].className = ' ';
}
//让当前索引位的按钮变添加样式
oSpan[_index].className = "indexA";
}
//给每一个索引位按钮添加点击事件
for(var i = 0; i < oSpan.length; i ++){
(function(i){
//立即执行函数，会产生闭包的
oSpan[i].onclick = function(){
//将 锁关上
key = false;
//让索引位等于当前点击的按钮
index = i;
//动画样式 让当前轮播图的位置等于-当前索引位 * 轮播图宽度
startMove(oUl,{left : -index * movewidth},
function(){
//将锁打开
key = true;
//给定时器加清除
timer = setTimeout(aoutMove,1500);
//执行索引位按钮样式方法
changIndex(index)
})
}
}(i))
}
}
//上面写好了现在这里就开始生成代码
arrBanner.banner(arrBanner)
渡一培训机构的课后作业，代码可能太臃肿了，还有很多需要优化的地方，多多包涵，还是个前端小白，立志做一个前端大佬
本文地址：https://blog.csdn.net/Yzhoun/article/details/107148186
上一篇： 荐 手撸实现一个富文本编辑器
下一篇： Freemarker模板生成排版缩进问题