關於圖片輪播的幾種思路

圖片輪播咱們常常在衆多網站中看到，各類輪播特效在有限的空間上展現了幾倍於空間大小的內容，而且有着良好的視覺效果。不少初學js的小夥伴都會拿這個來練習。我也不例外，因此在此分享幾個我寫輪播圖的過程，代碼不足之處請多指教哦，相互學習。

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

就是經過修改每一張圖片的透明度，讓其每隔一段時間將其中的某一張圖片透明度設爲1，而其它的設爲0，從而實現一種圖片輪流播放的效果。

這種效果的思路比較簡單，首先讓一組圖片絕對定位，讓其重疊在一塊兒，而後經過一個函數來控制圖片的透明度變化。同時還有一個定時器，不停的除發這個函數，每次改變不一樣圖片的透明度，讓其顯示。（更簡單的效果是直接修改display屬性，讓該顯示的圖片display:block,而不顯示的設爲display:none就能夠，只是效果上會差一些，但原理相同）

首先來看Html結構代碼：

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 /*
 2 關於插件的一些說明：
 3 parentID:是指父容器的id，最好是一個無序列表ul的id。
 4 childTag:是父容器裏面包裹每個圖片的標籤名，在無序列表裏能夠是li。
 5 使用此插件要想有一個圖片透明度漸進改變的效果，要給包裹圖片的標籤一個樣式，以下：
 6 transition: opacity 1s ease-in-out;
 7 能夠對這個transition就行相應的修改；
 8 建議使用此插件的Html結構以下：
 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         // 首先將全部圖片透明度設爲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     // 將全部圖片透明度設爲0
39     function hideItems() {
40         for (var i = 0; i < len; i++) {
41             items[i].style.opacity = 0;
42         }
43     }
44 };

View Code

這樣調用該插件便可：autoplay.js是我將這個插件保存到本地的一個文件。

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

View Code

 這裏面實現的時候結合了css3的transition屬性，讓代碼更簡潔，動畫效果也更好。關於transition的兼容我代碼中並無加前綴，須要的小夥伴們能夠自行加上，這裏只演示一個實現過程。

第二種輪播特效：

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

html結構式這樣子的：

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設爲relative，這樣才能夠對left值進行改變，固然也能夠設爲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

插件的調用方式和上面第一種的同樣，由於原理都差很少，一樣結合了css3的動畫實現，因此就不贅述原理了。

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