程序地带

【新思路】原生js实现banner无缝切换只需要两个标签



只需要两个标签实现任意数量的banner图切换


1.分析现有的banner切换方式


2.摸索一套无缝切换


3.总结


 


首先我们来看看现有大部分banner图的切换方式,


将已有的标签容器设置固定高、宽,超出的部分hide,


把banner图排成无缝的排(用flex布局就可以嗷嗷,没经验的可以看我之前的flex布局小程序)


再把所有排成一排的banner放到一个不设宽、高的容器中。js设置定时器变化这个容器的位置就可以实现。



 


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值查看当前位置,


应该还挺简单的,有时间的可以练习练习。


实战中还是用包比较好,希望可以帮到大家!


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Cml_l/article/details/111246189

随机推荐

python 快速排序_Python实现快速排序

一、快速排序简介快速排序(QuickSort)是一种效率很高的排序算法,是对冒泡排序的一种改进排序算法。快速排序首先任意选取一个数据(通常选待排序列表中的第一个数)作为基准数据ÿ...

weixin_39664746 阅读(645)

QT和VC操作快捷键

QT中的快捷键1.代码的对齐功能ctrl+i2.代码的整体左移shift+Tab3.选中代码进行整体右移Tab4.选中代码进行整体注释方法:ctrl+/VC中的快...

爱上876 阅读(618)

windows10下linux centOS 7.6网络配置(针对 NAT模式)

windows10下linux centOS 7.6网络配置(针对 NAT模式)

【环境/版本】windows10/centOS7.6【问题】是什么原因导致这一次配置了几天都没配置成功?【尝试过程】首先是按照网上下载安装教程,跟着教程一步一步做。安装好后发现虚拟机ping不通本机,...

我想进阿里mx 阅读(652)

Window 通过运行映射启动软件

Window 通过运行映射启动软件

*有Gif图,请耐心等待加载。例如:配置步骤1、创建一个存在快捷方式的目录(任意位置,推荐:在当前用户下QuickStart)。2、配置环境变量。此电脑->属性->高级系统设置->...

_阿星 阅读(339)

日志文件迁移至OSS

日志文件迁移至OSS

一台服务器在用阿里云ECS,因为穷,磁盘空间有限,服务器日志文件每天都在增长,需要定期清理释放磁盘空间,想到几种解决方案:写任务定时备份到本地服务器直接下载到本地用移动硬盘备份备份到阿里云OSS对象存...

幻者 阅读(565)