兩邊模糊輪播圖效果 html+css+js
技術標籤：前端html+css的入門常見效果csshtml前端不會播的輪播圖
先看效果：
輪播圖做法有很多，效果也有很多。下面是一種簡單的兩邊圖片模糊，中間圖片放大的輪播圖效果。滑鼠點選左邊或右邊的圖片後，它們會移動到中間並變大，其它圖片移動到到兩邊並模糊。
點選最右邊圖片：
點選最左邊圖片：
這個效果是隻是有滑鼠點選後就輪播，至於滑鼠不點選也定時自動輪播的效果以後有時間再出一片文章。
實現：
1. 定義標籤，.kuang是最底層盒子，.item是放圖片的盒子，可以寫任意張圖片盒子，我就寫了8張圖，不少過3張就行，他們都有一個相同類名.item。其中最後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=" 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%;
}
transition: all 1.5s; 過渡效果
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）然後點選事件裡，再來一個for迴圈，把全部圖的三個效果類都清除掉，再給它們全部新增xiaoshi類。這樣來說圖片全部都回到中間位置。如果圖總共只有三張可以刪掉這個迴圈。
（3）然後為獲得點選事件的圖片新增.middle這個類，這然它會移動到中間並放大。
this.previousElementSibling 表示獲得它同輩的上一個元素，表示它上一張圖片給他.left類讓它到左邊。？？表示前面真選前面，否則選後面。後面就是items[items.length-1]，表示如果它前面沒有圖片就選最後一張圖。
nextElementSibling 表示獲得它同輩的下一個元素，表示它下一張圖片給他.right類讓它到右邊。？？表示前面真選前面，否則選後面。後面就是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
等等等…
最近常聽這首歌：我從來沒去過紐約 - 筷子兄弟。
晚飯後我對她說
我想要出去買一包香菸
她叫我回來時輕一點
不要打擾孩子的睡眠
我輕輕開啟門走出去
樓道里昏暗燈光亮起
四周瀰漫著發黴的空氣
突然有個念頭出現在腦海
如果現在我就離開
我是不是該離開
永遠不回來
永遠不回來
我從來沒去過紐約
從沒有到過夏威夷
從未穿著牛仔衣淋著舊金山的雨
我從來沒去過紐約
我要感受著自由的空氣
我想要掙脫束縛解放我自己
當我站在街道旁
我已經帶了所有的東西
護照信用卡和 money
或許能趕上今晚的飛機
路燈下就停著計程車
坐公交或地鐵也不錯
心跳的感覺來臨在這一刻
再次充滿夢想的我
要放縱自己把束縛擺脫
我真的想離開
想要離開
想要離開
我從來沒去過紐約
從沒有到過夏威夷
從未穿著牛仔衣淋著舊金山的雨
我從來沒去過紐約
我要感受自由的空氣
我想要掙脫束縛解放我自己
然後我買了包香菸
原路返回到家裡面
走過潮溼 發黴熟悉的樓梯間
老婆說你怎麼才回來
畢姥爺就要上舞臺
她說你沒事吧
我還能有什麼事
我從來沒去過紐約
從沒有到過夏威夷
從未穿著牛仔衣淋著舊金山的雨
我從來沒去過紐約
我要感受自由的空氣
我想要掙脫束縛解放我自己 。
很喜歡一句話：
就當我們今天才畢業吧~