Solo se necesitan dos etiquetas para lograr cualquier número de cambio de gráfico de banner
1. Analizar los métodos de cambio de banner existentes
2. Fumble un conjunto de conmutaciones sin interrupciones
3. Resumen
Primero, echemos un vistazo a los métodos de cambio de la mayoría de las imágenes de banner existentes.
Establezca el contenedor de etiquetas existente a una altura y un ancho fijos y oculte la parte sobrante.
Organice los diagramas de pancartas en una fila perfecta (puede usar el diseño flexible, pero si no tiene experiencia, puede ver mi subprograma de diseño flexible anterior)
Luego coloque todas las pancartas en una fila en un contenedor sin ancho ni alto. js puede configurar el temporizador para cambiar la posición de este contenedor.
2.1 Después de analizar los modelos existentes, sigamos primero el conjunto de muñecos y el código fuente no se cargará aquí.
Sin embargo, el código de front-end de dicho conmutador parecerá demasiado, lo que no es fácil de mantener, y puede haber errores al cambiar.
Solo podemos escribir dos etiquetas en la interfaz,
Use la matriz js para agregar dinámicamente,
De esta manera, no importa cuántas imágenes de banner haya, solo es necesario escribir dos etiquetas.
Solo es necesario administrar la matriz js,
Solo necesita ajustar la matriz si necesita modificar el orden de visualización.
Primero echemos un vistazo al efecto general.
2.2, hablemos de la implementación.
Dos etiquetas están dispuestas en una fila, use js para ajustar la posición de las dos etiquetas al mismo tiempo
Una vez completado el ajuste, retire la etiqueta que ha estado fuera del marco
Después de eliminar el primero, agregue uno después del existente (porque el interruptor establece el tiempo de transición, por lo que aquí debe usar el temporizador de retardo para eliminar y agregar)
Luego agregue el valor u objeto en la matriz al atributo de la nueva etiqueta (aquí i ++ está bien)
De esta forma, cuando el temporizador de bucle se ejecute por segunda vez, se obtendrá un nuevo elemento de etiqueta, pero no hay aumento, aún quedan dos.
En este punto, también necesitamos hacer una función de permanecer cuando el cursor se mueve hacia arriba.
Aquí usé el temporizador claro y el temporizador de creación.
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 Resumen
En realidad, esto no es perfecto, pero nos ayuda a comprender y practicar,
Si tiene tiempo, puede mejorar los botones delanteros y traseros y cualquier botón usted mismo.
Use la longitud de la matriz para recorrer un botón arbitrario, use el valor i para ver la posición actual,
Debería ser bastante simple, si tienes tiempo, puedes practicar.
Es mejor usar una bolsa en un combate real, ¡espero que pueda ayudar a todos!