最初に効果を見てください：
写真を回転させる方法はたくさんあり、効果もたくさんあります。以下は、両側にぼやけた画像、中央に拡大された画像がある単純なカルーセル効果です。左または右の画像をマウスでクリックすると、中央に移動して大きくなり、他の画像は横に移動してぼやけます。
右端の画像を
クリックします。左端の画像をクリックします。
この効果は、マウスがクリックされた後にのみ回転することです。マウスがクリックされない自動回転の効果については、将来、別の記事を公開する時間があります。
成し遂げる：
1.ラベルを定義します。.kuangは一番下のボックス、.itemは画像のボックスです。任意の画像ボックスを書き込むことができます。私は、8枚の画像、3枚以下の画像を書き込みましたが、すべて同じクラス名です。最後の3枚の写真のクラス名を付けます。.leftはレンダリングの左側を表し、.middleは上記のレンダリングの中央のレンダリングを表し、.rightはレンダリングの右側のレンダリングを表します。
<div class="kuang">
<div class="kuang">
<div class="item "><img src="4.jpg"></div>
<div class="item "><img src="5.jpg"></div>
<div class="item "><img src="6.jpg"></div>
<div class="item "><img src="7.jpg"></div>
<div class="item "><img src="8.jpg"></div>
<div class="item left"><img src="1.jpg"></div>
<div class="item middle"><img src="2.jpg"></div>
<div class="item right"><img src="3.jpg"></div>
</div>
2.下のボックスと画像の基本的なスタイルまず、すべての画像ボックスが完全に同じ位置に配置され、すべての画像が重なるようにします。
.kuang{
position: relative;
width: 400px;
height: 250px;
cursor: pointer;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 250px;
transition: all 1.5s;
}
.item img{
width: 100%;
height: 100%;
}
遷移：すべて1.5秒;遷移効果
3.私たちの目が見る上記の効果の3つの写真を書き、それらのクラススタイルを重ね合わせます。左側の画像は半分左に移動してぼやけ、右側の画像は半分右に移動してぼやけ、中央の画像は中央にあり、1.3倍に拡大します。：
.kuang .left{
left: -200px;
filter: blur(6px);
z-index: 3;
}
.kuang .middle{
left: 0px;
transform: scale(1.3);
z-index: 4;
}
.kuang .right{
left: 200px;
filter: blur(6px);
z-index: 3;
}
真ん中の画像が最上層に表示されるため、z-indexが最大になります。左右をカバーします。
filter：blur（6px）;画像がぼやけています。
transform：scale（1.3）;画像が拡大されます。
4.私たちの目に見える3つのレンダリングではない他の写真にスタイルを与えます。
.xiaoshi{
left: 0px;
z-index: 1;
}
それらはすべて重なり合って中央に戻り、z-indexが最も小さく、左、中央、右の3つの目よりも小さいため、誰もそれらを見ることができません。
5.jsの実装では、対応する要素にクラス名を大まかに割り当てています。
（1）最初に、すべての画像がitems配列に配置され、次にforループがクリックイベントを各画像にバインドします。
（2）次に、クリックイベントで、すべての画像の3つのエフェクトクラスすべてをクリアし、それらすべてにxiaoshiクラスを追加する別のforループがあります。このようにして、画像はすべて中央の位置に戻ります。写真が全部で3枚しかない場合は、このサイクルを削除できます。
（3）次に、クリックイベントを取得する画像にクラス.middleを追加すると、中央に移動してズームインします。
this.previousElementSiblingは、兄弟の前の要素を取得することを意味します。つまり、最後の画像を取得します。左側のクラスは左側に配置します。？？これは、実際に前面が選択されていることを意味します。それ以外の場合は、背面が選択されています。以下はitems [items.length-1]です。つまり、前に画像がない場合は、最後の画像を選択します。
nextElementSiblingは、兄弟の次の要素を取得することを意味します。つまり、次の画像を彼に提供します。適切なクラスは、それを右側に配置します。？？これは、実際に前面が選択されていることを意味します。それ以外の場合は、背面が選択されています。以下はitems [0]です。つまり、背後に画像がない場合は、最初の画像を選択します。
var items = document.querySelectorAll('.item');
for(var i=0;i<items.length;i++)
{
items[i].addEventListener('click',function(){
for(let j=0;j<items.length;j++)
{
items[j].classList.remove('left','right','middle');
items[j].classList.add('xiaoshi');
}
this.classList.remove('left','middle','right');
this.classList.add('middle');
let left = this.previousElementSibling ?? items[items.length-1];
left.classList.add('left');
let right = this.nextElementSibling ?? items[0];
right.classList.add('right');
})
}
完全なコード：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北极光之夜。</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(white,black) ;
}
.kuang{
position: relative;
width: 400px;
height: 250px;
cursor: pointer;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 250px;
transition: all 1.5s;
}
.item img{
width: 100%;
height: 100%;
}
.kuang .left{
left: -200px;
filter: blur(6px);
z-index: 3;
}
.kuang .middle{
left: 0px;
transform: scale(1.3);
z-index: 4;
}
.kuang .right{
left: 200px;
filter: blur(6px);
z-index: 3;
}
.xiaoshi{
left: 0px;
z-index: 1;
}
</style>
</head>
<body>
<div class="kuang">
<div class="kuang">
<div class="item "><img src="4.jpg"></div>
<div class="item "><img src="5.jpg"></div>
<div class="item "><img src="6.jpg"></div>
<div class="item "><img src="7.jpg"></div>
<div class="item "><img src="8.jpg"></div>
<div class="item left"><img src="1.jpg"></div>
<div class="item middle"><img src="2.jpg"></div>
<div class="item right"><img src="3.jpg"></div>
</div>
</div>
<script>
var items = document.querySelectorAll('.item');
for(var i=0;i<items.length;i++)
{
items[i].addEventListener('click',function(){
for(let j=0;j<items.length;j++)
{
items[j].classList.remove('left','right','middle');
items[j].classList.add('xiaoshi');
}
this.classList.remove('left','middle','right');
this.classList.add('middle');
let left = this.previousElementSibling ?? items[items.length-1];
left.classList.add('left');
let right = this.nextElementSibling ?? items[0];
right.classList.add('right');
})
}
</script>
</body>
</html>
まとめ（歌詞）：
その他の記事：
レスポンシブカードホバリング効果html + css
水波読み込みアニメーションhtml + css
ナビゲーションバースクロールグラデーション効果html + css + js
など...
私は最近この曲をよく聴いています。ニューヨークに行ったことがない-ChopstickBrothers。
今出発したら
私は去るべきですか
戻ってくることはありません
…
通りのそばに立つと
私はすべてを持ってきました
パスポートのクレジットカードとお金
たぶん今夜飛行機に乗る
街灯の下に駐車したタクシー
バスや地下鉄で悪くない
この瞬間に鼓動感がやってくる
私はまた夢に満ちています
自分を甘やかし、制約を取り除きます
本当に去りたい
帰りたい
私は文が好きです：
今日は卒業しましょう〜