圖片輪播咱們常常在衆多網站中看到,各類輪播特效在有限的空間上展現了幾倍於空間大小的內容,而且有着良好的視覺效果。不少初學js的小夥伴都會拿這個來練習。我也不例外,因此在此分享幾個我寫輪播圖的過程,代碼不足之處請多指教哦,相互學習。javascript
好了,先來講第一種輪播特效:css
就是經過修改每一張圖片的透明度,讓其每隔一段時間將其中的某一張圖片透明度設爲1,而其它的設爲0,從而實現一種圖片輪流播放的效果。html
這種效果的思路比較簡單,首先讓一組圖片絕對定位,讓其重疊在一塊兒,而後經過一個函數來控制圖片的透明度變化。同時還有一個定時器,不停的除發這個函數,每次改變不一樣圖片的透明度,讓其顯示。(更簡單的效果是直接修改display屬性,讓該顯示的圖片display:block,而不顯示的設爲display:none就能夠,只是效果上會差一些,但原理相同)java
首先來看Html結構代碼:css3
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>
對其進行樣式調整以後,圖片都在同一個位置,能夠先給第一張圖片設置爲顯示,而其它的圖片設爲不顯示。ide
下面來看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 };
這樣調用該插件便可:autoplay.js是我將這個插件保存到本地的一個文件。學習
1 <script type="text/javascript" src="./autoplay.js"></script> 2 <script type="text/javascript"> 3 autoPlay('pictures','li'); 4 </script>
這裏面實現的時候結合了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>
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 };
插件的調用方式和上面第一種的同樣,由於原理都差很少,一樣結合了css3的動畫實現,因此就不贅述原理了。
還有一種是無縫輪播方式,就我的感受這種的顯示效果最好。