배너 그래프 전환 수에 관계없이 두 개의 레이블 만 필요합니다.
1. 기존 배너 전환 방법 분석
2. 끊김없는 전환 세트
3. 요약
먼저 기존 배너 이미지 대부분의 전환 방법을 살펴 보겠습니다.
기존 라벨 컨테이너를 고정 높이와 너비로 설정하고 초과 부분을 숨 깁니다.
배너 다이어그램을 매끄럽게 배열하십시오 (플렉스 레이아웃을 사용할 수 있지만 경험이없는 경우 이전 플렉스 레이아웃 애플릿을 볼 수 있습니다).
그런 다음 모든 배너를 너비 나 높이가없는 컨테이너에 한 줄로 놓습니다. Node.js는이 컨테이너의 위치를 변경하도록 타이머를 설정할 수 있습니다.
2.1. 기존 모델을 분석 한 후 인형 세트를 먼저 살펴보면 소스 코드는 여기에 업로드되지 않습니다.
그러나 이러한 스위치의 프런트 엔드 코드가 너무 많아 유지 관리가 쉽지 않으며 전환시 버그가 발생할 수 있습니다.
프런트 엔드에 두 개의 태그 만 쓸 수 있습니다.
js 배열을 사용하여 동적으로 추가하십시오.
이렇게하면 배너 이미지가 아무리 많아도 두 개의 레이블 만 작성하면됩니다.
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;
}자바 스크립트
// 用两个节点
// 完事后删除第一个节点
// 并追加一个节点
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 값을 사용하여 현재 위치를 봅니다.
아주 간단해야하는데 시간이 있으면 연습 할 수 있습니다.
실제 전투에서 가방을 사용하는 것이 더 낫습니다. 모두에게 도움이되기를 바랍니다!