关于图片轮播的几种思路

图片轮播我们经常在众多网站中看到，各种轮播特效在有限的空间上展示了几倍于空间大小的内容，并且有着良好的视觉效果。很多初学js的小伙伴都会拿这个来练习。我也不例外，所以在此分享几个我写轮播图的过程，代码不足之处请多指教哦，相互学习。

好了，先来说第一种轮播特效：

就是通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，而其它的设为0，从而实现一种图片轮流播放的效果。

这种效果的思路比较简单，首先让一组图片绝对定位，让其重叠在一起，然后通过一个函数来控制图片的透明度变化。同时还有一个定时器，不停的除发这个函数，每次改变不同图片的透明度，让其显示。（更简单的效果是直接修改display属性，让该显示的图片display:block,而不显示的设为display:none就可以，只是效果上会差一些，但原理相同）

首先来看Html结构代码：

<ul id="pictures">
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
</ul>

对其进行样式调整之后，图片都在同一个位置，可以先给第一张图片设置为显示，而其它的图片设为不显示。

下面来看js的代码：

/*
关于插件的一些说明：
parentID:是指父容器的id，最好是一个无序列表ul的id。
childTag:是父容器里面包裹每一个图片的标签名，在无序列表里可以是li。
使用此插件要想有一个图片透明度渐进改变的效果，要给包裹图片的标签一个样式，如下：
transition: opacity 1s ease-in-out;
可以对这个transition就行相应的修改；
建议使用此插件的Html结构如下：
<ul id="parentId">
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
</ul>
此时：parentId即为ul的id;
      childTag即为li;
*/

var autoPlay=function(parentID,childTag) {
    var pictures = document.getElementById(parentID);
    var items = pictures.getElementsByTagName(childTag);
    var len=items.length;
    var index = 0;
    showItem();
    // 显示一张图片
    function showItem() {
        // 首先将所有图片透明度设为0
        hideItems();
        items[index].style.opacity = 1;
        // 将要显示的透明度改变让其显示
        if (index > len - 2) {
            index = 0;
        } else {
            index++;
        }
        // 在这里用setTimeout模拟setInterval的效果
        setTimeout(showItem, 2500);
    }
    // 将所有图片透明度设为0
    function hideItems() {
        for (var i = 0; i < len; i++) {
            items[i].style.opacity = 0;
        }
    }
};

这样调用该插件即可：autoplay.js是我将这个插件保存到本地的一个文件。

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

 这里面实现的时候结合了css3的transition属性，让代码更简洁，动画效果也更好。关于transition的兼容我代码中并没有加前缀，需要的小伙伴们可以自行加上，这里只演示一个实现过程。

第二种轮播特效：

这一种是滑动形式的，通过改变元素的left值让图片呈现左右滚动的效果。

html结构式这样子的：

<ul id="pictures">
            <li><img src=""></li>
            <li><img src=""></li>
            <li><img src=""></li>
            <li><img src=""></li>
        </ul>

js插件代码是这样子的：

var autoSlide = function(parentId, childTag) {
    var parent = document.getElementById(parentId);
    // 这里将元素的position设为relative，这样才可以对left值进行改变，当然也可以设为absolute
    parent.style.position = "relative";
    var items = parent.getElementsByTagName(childTag);
    var width = items[0].offsetWidth;
    var index = 0;
    function slide() {
        if (index > items.length - 2) {
            index = 0;
        } else {
            index++;
        }
        moveWidth = -width * index;
        parent.style.left = moveWidth + "px";
        setTimeout(slide, 1500);
    }
    slide();
};

插件的调用方式和上面第一种的一样，因为原理都差不多，同样结合了css3的动画实现，所以就不赘述原理了。

还有一种是无缝轮播方式，就个人感觉这种的显示效果最好。