當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

轮播图特效 html+css+js

發布時間：2024/1/8 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了轮播图特效 html+css+js 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先看效果：

輪播圖做法有很多，效果也有很多。下面是一種簡單的兩邊圖片模糊，中間圖片放大的輪播圖效果。鼠標點擊左邊或右邊的圖片后，它們會移動到中間并變大，其它圖片移動到到兩邊并模糊。

點擊最右邊圖片：

點擊最左邊圖片：

這個效果是只是有鼠標點擊后就輪播，至于鼠標不點擊也定時自動輪播的效果以后有時間再出一片文章。

實現：

1. 定義標簽，.kuang是最底層盒子，.item是放圖片的盒子，可以寫任意張圖片盒子，我就寫了8張圖，不少過3張就行，他們都有一個相同類名.item。其中最后3張圖分別再給他們一個類名。.left表示我們效果圖的左邊那張，.middle就是上面效果圖的中間那張，.right就是我們效果圖的右邊那張：

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]，表示如果它后面沒有圖片就選第一張圖。

完整代碼：

<!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

或許能趕上今晚的飛機

路燈下就停著出租車

坐公交或地鐵也不錯

心跳的感覺來臨在這一刻

再次充滿夢想的我

要放縱自己把束縛擺脫

我真的想離開

想要離開

很喜歡一句話：

就當我們今天才畢業吧~

總結

以上是生活随笔為你收集整理的轮播图特效 html+css+js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。