任意の数のバナーグラフの切り替えを実現するために必要なラベルは2つだけです
1.既存のバナー切り替え方法を分析します
2.シームレスな切り替えのセットをいじくりまわす
3.まとめ
まず、既存のバナー画像のほとんどの切り替え方法を見てみましょう。
既存のラベルコンテナを固定の高さと幅に設定し、余分な部分を非表示にします。
バナー図をシームレスな行に配置します（フレックスレイアウトを使用できますが、経験がない場合は、以前のフレックスレイアウトアプレットを参照できます）
次に、すべてのバナーを幅や高さのないコンテナに一列に並べます。jsは、このコンテナの位置を変更するようにタイマーを設定できます。
2.1。既存のモデルを分析した後、最初に人形のセットを追跡しましょう。ソースコードはここにアップロードされません。
ただし、このようなスイッチのフロントエンドコードは多すぎるように見え、保守が容易ではなく、切り替え時にバグが発生する可能性があります。
フロントエンドに2つのタグを書くだけです。
js配列を使用して動的に追加します。
このように、バナー画像がいくつあっても、ラベルを2つ書くだけで済みます。
jsアレイを管理するだけで、
表示順序を変更する必要がある場合にのみ、配列を調整する必要があります。
まず、全体的な効果を見てみましょう。
2.2、実装について話しましょう。
2つのラベルが一列に配置されています。jsを使用して2つのラベルの位置を同時に調整します
調整が完了したら、フレームから外れたラベルを取り外します
最初のものを削除した後、既存のものの後に1つ追加します（スイッチが遷移時間を設定するため、ここでは遅延タイマーを使用して削除および追加する必要があります）
次に、配列内の値またはオブジェクトを新しいタグの属性に追加します（ここではi ++で問題ありません）
このように、ループタイマーが2回実行されると、新しいラベル要素が取得されますが、増加はなく、2つあります。
この時点で、カーソルが上に移動したときに留まる機能も作成する必要があります。
ここでは、クリアタイマーと作成タイマーを使用しました。
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値を使用して現在の位置を表示します。
とてもシンプルなはずです。時間があれば練習できます。
実際の戦闘ではバッグを使用する方が良いです、それがみんなに役立つことを願っています！