标签：
图片轮播我们经常在众多网站中看到，各种轮播特效在有限的空间上展示了几倍于空间大小的内容，并且有着良好的视觉效果。很多初学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>
对其进行样式调整之后，图片都在同一个位置，可以先给第一张图片设置为显示，而其它的图片设为不显示。
下面来看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 index = 0; 22 showItem(); 23 // 显示一张图片 24 function showItem() { 25 // 首先将所有图片透明度设为0 26 hideItems(); 27 items[index].style.opacity = 1; 28 // 将要显示的透明度改变让其显示 29 if (index > items.length - 2) { 30 index = 0; 31 } else { 32 index++; 33 } 34 // 在这里用setTimeout模拟setInterval的效果 35 setTimeout(showItem, 2500); 36 } 37 // 将所有图片透明度设为0 38 function hideItems() { 39 for (var i = 0; i < items.length; i++) { 40 items[i].style.opacity = 0; 41 } 42 } 43 };
这样调用该插件即可：autoplay.js是我将这个插件保存到本地的一个文件。
1 <script type="text/javascript" src="./autoplay.js"></script> 2 <script type="text/javascript"> 3 autoPlay(‘pictures‘,‘li‘); 4 </script>
标签：
原文地址：http://www.cnblogs.com/luxueping/p/5591245.html
