Only two labels are needed to achieve any number of banner graph switching
1. Analyze the existing banner switching methods
2. Fumble a set of seamless switching
3. Summary
First, let’s take a look at the switching methods of most of the existing banner images.
Set the existing label container to a fixed height and width, and hide the excess part.
Arrange the banner diagrams in a seamless row (you can use flex layout, but if you have no experience, you can see my previous flex layout applet)
Then put all the banners in a row into a container with no width or height. js can set the timer to change the position of this container.
2.1. After analyzing the existing models, let's follow the set of dolls first, and the source code will not be uploaded here.
However, the front-end code of such a switch will appear to be too much, which is not easy to maintain, and there may be bugs when switching.
We can just write two tags on the front end,
Use js array to add dynamically,
In this way, no matter how many banner images there are, only two labels need to be written.
Only need to manage the js array,
You only need to adjust the array if you need to modify the display order.
Let's take a look at the overall effect first.
2.2, let's talk about the implementation.
Two labels are arranged in a row, use js to adjust the position of the two labels at the same time
After the adjustment is completed, remove the label that has been out of the frame
After removing the first one, add one after the existing one (because the switch sets the transition time, so here you need to use the delay timer to delete and add)
Then add the value or object in the array to the attribute of the new tag (here i++ is fine)
In this way, when the loop timer is executed for the second time, a new label element will be obtained, but there is no increase, there are still two.
At this point, we also need to make a function of staying when the cursor moves up.
Here I used clear timer and create timer.
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 Summary
This is actually not perfect, but it helps us understand and practice,
If you have time, you can improve the front and back buttons and any buttons by yourself.
Use the length of the array to loop an arbitrary button, use the i value to view the current position,
It should be quite simple. If you have time, you can practice.
It is better to use a bag in actual combat, I hope it can help everyone!