只需要两个标签实现任意数量的banner图切换
1.分析现有的banner切换方式
2.摸索一套无缝切换
3.总结
首先我们来看看现有大部分banner图的切换方式,
将已有的标签容器设置固定高、宽,超出的部分hide,
把banner图排成无缝的排(用flex布局就可以嗷嗷,没经验的可以看我之前的flex布局小程序)
再把所有排成一排的banner放到一个不设宽、高的容器中。js设置定时器变化这个容器的位置就可以实现。
扫描二维码关注公众号,回复:
12866223 查看本文章
2.1,分析了现有的模式后,我们先跟着套一下娃,这里就不上源码了。
但是这样的切换前端代码会显得多,不便于维护,而且切换时会有可能出现穿帮bug,
我们可以在前端只写两个标签,
使用js数组来进行动态添加,
这样不管有多少的banner图,都只需要写两个标签,
只需要管理js的数组即可,
需要修改显示顺序什么的也只需用调整数组即可。
我们先来看一下总体的效果吧。
2.2,我们来聊一下实现。
两个标签排成排,利用js来同时调整两个标签的位置
调整完成后,移出已经出框的标签
移出第一个后,在现有的后面添加一个(因为切换设置了过渡的时间,所以这里需要用延时定时器来删除和添加)
再将数组里面的值或对象添加到新增标签的属性中(这里i++就可以)
这样循环定时器第二次执行时就会得到新的标签元素,但没有增加,还是两个。
到这里我们还需要做一个光标移动上去时停留的功能。
这里我用到了清除定时器和创建定时器。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自己先写一个</title>
<!-- <link rel="stylesheet" type="text/css" href="css/01.css"/> -->
<!-- 方法一,不是无缝衔接的
<script src="js/01.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/04.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/02.css"/>
</head>
<body>
<!-- 先写一个父级容器来hide多余的部分 -->
<div id="" class="container">
<div id="move">
<a href="###" class="a1"><img src="" width="600px"/></a>
<a href="###" class="a2"><img src="" width="600px"></a>
</div>
</div>
</body>
</html>
css
.container{
width: 600px;
height: 230px;
overflow: hidden;
box-sizing: border-box;
position: relative;
left: 600px;
}
#move{
position: relative;
left: 0px;
border: 0px solid red;
background-color: #000080;
display: block;
display: flex;
align-items: center;
transition: all 0.6s;
}
a{
transition: all 0.6s;
}
.a1{
position: absolute;
left: 0px;
top: 0;
}
.a2{
position: absolute;
left: 600px;
top: 0;
}
JavaScript
// 用两个节点
// 完事后删除第一个节点
// 并追加一个节点
window.onload=function (){
var timer=null;
var arr=[
"https://hbimg.huabanimg.com/69923ffda79e37a5db7f5251c51646ab21937aba9b3c8-jBibIK_fw658/format/webp",
"https://hbimg.huabanimg.com/1dea14f0814dd3f51cf771ecd400a920621809c6b5096-v2zkkt_fw658/format/webp",
"https://hbimg.huabanimg.com/21f3c47b1a357aa726ac91e76187b2b271d53988838b3-0cpUar_fw658/format/webp",
"https://hbimg.huabanimg.com/584e2580b21993d1b001940f1021879376cae8c72f1f6-4c9ygf_fw658/format/webp",
];
var i=0;
var mya=document.getElementsByTagName("a");
mya[0].getElementsByTagName("img")[0].src=arr[i];
i++;
mya[1].getElementsByTagName("img")[0].src=arr[i];
function banner(){
mya[0].getElementsByTagName("img")[0].src=arr[i];
//i++放到外面,不放在这个[]方括号,不然会先赋URL在加,就会有漏洞
i++;
//判断放到前面,否则就会加到4
if(i>=arr.length){
i=0;
}
mya[1].getElementsByTagName("img")[0].src=arr[i];
mya[0].style.left=mya[0].offsetLeft-600+"px";
mya[1].style.left=mya[1].offsetLeft-600+"px";
console.log(i);
setTimeout(()=>{
//移除第一个
mya[0].remove();
//现在第二个变成了第一个,要在它的后面添加一个,记住因为第一个删除了,原来的第二个变成了第一个,所以在mya[0]后面添加
//创建一个标签
var myca=document.createElement('a');
var mycimg=document.createElement('img');
myca.className="a2";
myca.href="###";
myca.appendChild(mycimg);
//d.appendChild(p);
//第一个是父节点,括号里是添加的节点
move.appendChild(myca);
},600);
}
timer=setInterval(()=>{
banner();
},2000);
//}
//做一个鼠标移入时暂停
move.onmouseover=function (){
clearInterval(timer);
console.log("清除定时器");
}
move.onmouseleave=function (){
timer=setInterval(()=>{
banner();
},2000);
console.log("开启定时器");
}
}
3.1总结一下
这个其实还不完善,但有助于我们理解和练习,
大家有时间可以自行完善一下前后按钮和任意按钮,
利用数组长度循环一个任意按钮,利用i值查看当前位置,
应该还挺简单的,有时间的可以练习练习。
实战中还是用包比较好,希望可以帮到大家!