轮播图特效 html+css+js
先看效果：
輪播圖做法有很多，效果也有很多。下面是一種簡(jiǎn)單的兩邊圖片模糊，中間圖片放大的輪播圖效果。鼠標(biāo)點(diǎn)擊左邊或右邊的圖片后，它們會(huì)移動(dòng)到中間并變大，其它圖片移動(dòng)到到兩邊并模糊。
點(diǎn)擊最右邊圖片：
點(diǎn)擊最左邊圖片：
這個(gè)效果是只是有鼠標(biāo)點(diǎn)擊后就輪播，至于鼠標(biāo)不點(diǎn)擊也定時(shí)自動(dòng)輪播的效果以后有時(shí)間再出一片文章。
實(shí)現(xiàn)：
1. 定義標(biāo)簽，.kuang是最底層盒子，.item是放圖片的盒子，可以寫任意張圖片盒子，我就寫了8張圖，不少過3張就行，他們都有一個(gè)相同類名.item。其中最后3張圖分別再給他們一個(gè)類名。.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. 最底層盒子與圖片的基本樣式，首先讓圖片盒子全部都絕對(duì)定位相同位置，使得圖片它們?nèi)恐丿B在一起：
.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. 寫我們眼睛看到的上面效果的那三張圖分別再給他們疊加一個(gè)類的樣式。左邊的圖向左移動(dòng)自身的一半并模糊，右邊的圖向右邊移動(dòng)一半并模糊，中間的在中間并放大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.給當(dāng)不是我們眼睛看到的3張效果圖的其它圖片一個(gè)樣式，
.xiaoshi{left: 0px;z-index: 1;}它們都重疊一起，回到中間，而且它們的z-index最小，比左，中，右3張眼睛看得到效果圖都小，所以沒人看得見它們。
5.js實(shí)現(xiàn)，大致就是為相應(yīng)元素賦值類名：
（1）首先全部圖都放在了items這個(gè)數(shù)組里，然后for循環(huán)，給每一個(gè)圖片都綁定一個(gè)點(diǎn)擊事件。
（2）然后點(diǎn)擊事件里，再來一個(gè)for循環(huán)，把全部圖的三個(gè)效果類都清除掉，再給它們?nèi)刻砑觴iaoshi類。這樣來說圖片全部都回到中間位置。如果圖總共只有三張可以刪掉這個(gè)循環(huán)。
（3）然后為獲得點(diǎn)擊事件的圖片添加.middle這個(gè)類，這然它會(huì)移動(dòng)到中間并放大。
this.previousElementSibling 表示獲得它同輩的上一個(gè)元素，表示它上一張圖片給他.left類讓它到左邊。？？表示前面真選前面，否則選后面。后面就是items[items.length-1]，表示如果它前面沒有圖片就選最后一張圖。
nextElementSibling 表示獲得它同輩的下一個(gè)元素，表示它下一張圖片給他.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>總結(jié)（抒情）：
其它文章：
響應(yīng)式卡片懸停效果 html+css
水波加載動(dòng)畫 html+css
導(dǎo)航欄滾動(dòng)漸變效果 html+css+js
等等等…
最近常聽這首歌：我從來沒去過紐約 - 筷子兄弟。
如果現(xiàn)在我就離開
我是不是該離開
永遠(yuǎn)不回來
…
當(dāng)我站在街道旁
我已經(jīng)帶了所有的東西
護(hù)照信用卡和 money
或許能趕上今晚的飛機(jī)
路燈下就停著出租車
坐公交或地鐵也不錯(cuò)
心跳的感覺來臨在這一刻
再次充滿夢(mèng)想的我
要放縱自己把束縛擺脫
我真的想離開
想要離開
很喜歡一句話：
就當(dāng)我們今天才畢業(yè)吧~
總結(jié)
以上是生活随笔為你收集整理的轮播图特效 html+css+js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 想开咖啡店要怎么入手？
- 下一篇： 十一周二次课