圖片輪播我們經(jīng)常在眾多網(wǎng)站中看到，各種輪播特效在有限的空間上展示了幾倍于空間大小的內(nèi)容，并且有著良好的視覺效果。很多初學(xué)js的小伙伴都會拿這個來練習(xí)。我也不例外，所以在此分享幾個我寫輪播圖的過程，代碼不足之處請多指教哦，相互學(xué)習(xí)。

好了，先來說第一種輪播特效：

就是通過修改每一張圖片的透明度，讓其每隔一段時間將其中的某一張圖片透明度設(shè)為1，而其它的設(shè)為0，從而實現(xiàn)一種圖片輪流播放的效果。

這種效果的思路比較簡單，首先讓一組圖片絕對定位，讓其重疊在一起，然后通過一個函數(shù)來控制圖片的透明度變化。同時還有一個定時器，不停的除發(fā)這個函數(shù)，每次改變不同圖片的透明度，讓其顯示。（更簡單的效果是直接修改display屬性，讓該顯示的圖片display:block,而不顯示的設(shè)為display:none就可以，只是效果上會差一些，但原理相同）

首先來看Html結(jié)構(gòu)代碼：

1 <ul id="pictures"> 2 <li><img src=""></li> 3 <li><img src=""></li> 4 <li><img src=""></li> 5 <li><img src=""></li> 6 </ul> View Code

對其進行樣式調(diào)整之后，圖片都在同一個位置，可以先給第一張圖片設(shè)置為顯示，而其它的圖片設(shè)為不顯示。

下面來看js的代碼：

1 /* 2 關(guān)于插件的一些說明： 3 parentID:是指父容器的id，最好是一個無序列表ul的id。 4 childTag:是父容器里面包裹每一個圖片的標(biāo)簽名，在無序列表里可以是li。 5 使用此插件要想有一個圖片透明度漸進改變的效果，要給包裹圖片的標(biāo)簽一個樣式，如下： 6 transition: opacity 1s ease-in-out; 7 可以對這個transition就行相應(yīng)的修改； 8 建議使用此插件的Html結(jié)構(gòu)如下： 9 <ul id="parentId"> 10 <li><img src=""></li> 11 <li><img src=""></li> 12 <li><img src=""></li> 13 </ul> 14 此時：parentId即為ul的id; 15 childTag即為li; 16 */ 17 18 var autoPlay=function(parentID,childTag) { 19 var pictures = document.getElementById(parentID); 20 var items = pictures.getElementsByTagName(childTag); 21 var len=items.length; 22 var index = 0; 23 showItem(); 24 // 顯示一張圖片 25 function showItem() { 26 // 首先將所有圖片透明度設(shè)為0 27 hideItems(); 28 items[index].style.opacity = 1; 29 // 將要顯示的透明度改變讓其顯示 30 if (index > len - 2) { 31 index = 0; 32 } else { 33 index++; 34 } 35 // 在這里用setTimeout模擬setInterval的效果 36 setTimeout(showItem, 2500); 37 } 38 // 將所有圖片透明度設(shè)為0 39 function hideItems() { 40 for (var i = 0; i < len; i++) { 41 items[i].style.opacity = 0; 42 } 43 } 44 }; View Code

這樣調(diào)用該插件即可：autoplay.js是我將這個插件保存到本地的一個文件。

1 <script type="text/javascript" src="./autoplay.js"></script> 2 <script type="text/javascript"> 3 autoPlay('pictures','li'); 4 </script> View Code

?這里面實現(xiàn)的時候結(jié)合了css3的transition屬性，讓代碼更簡潔，動畫效果也更好。關(guān)于transition的兼容我代碼中并沒有加前綴，需要的小伙伴們可以自行加上，這里只演示一個實現(xiàn)過程。

第二種輪播特效：

這一種是滑動形式的，通過改變元素的left值讓圖片呈現(xiàn)左右滾動的效果。

html結(jié)構(gòu)式這樣子的：

1 <ul id="pictures"> 2 <li><img src=""></li> 3 <li><img src=""></li> 4 <li><img src=""></li> 5 <li><img src=""></li> 6 </ul> View Code

js插件代碼是這樣子的：

1 var autoSlide = function(parentId, childTag) { 2 var parent = document.getElementById(parentId); 3 // 這里將元素的position設(shè)為relative，這樣才可以對left值進行改變，當(dāng)然也可以設(shè)為absolute 4 parent.style.position = "relative"; 5 var items = parent.getElementsByTagName(childTag); 6 var width = items[0].offsetWidth; 7 var index = 0; 8 function slide() { 9 if (index > items.length - 2) { 10 index = 0; 11 } else { 12 index++; 13 } 14 moveWidth = -width * index; 15 parent.style.left = moveWidth + "px"; 16 setTimeout(slide, 1500); 17 } 18 slide(); 19 }; View Code

插件的調(diào)用方式和上面第一種的一樣，因為原理都差不多，同樣結(jié)合了css3的動畫實現(xiàn)，所以就不贅述原理了。

還有一種是無縫輪播方式，就個人感覺這種的顯示效果最好。

?

轉(zhuǎn)載于:https://www.cnblogs.com/luxueping/p/5591245.html

總結(jié)

以上是生活随笔為你收集整理的关于图片轮播的几种思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。