轮播图实现想法

轮播图一个基础的js动画效果，我感觉很low了，其一都在用，其二原理都差不多，其三我没有心得啊！！！

轮播图h5布局

  <div class="carousel" id="carousel">
        <div class="btns">
            <a class="leftBtn"  id="leftBtn"></a>
            <a class="rightBtn" id="rightBtn"></a>
        </div>
        <div class="imageslist" id="imageslist">
            <ul>
                <li class="first"><a>![](images/0.jpg)</a></li>
                <li><a>![](images/1.jpg)</a></li>
                <li><a>![](images/2.jpg)</a></li>
                <li><a>![](images/3.jpg)</a></li>
                <li><a>![](images/4.jpg)</a></li>
            </ul>
        </div>
        <div class="circles" id="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

这就是html5的布局了
css格式不写了套用的杨杰老师的，html也是套用的

以下重头了 JS部分 动画基石

轮播图的js部分

先搞到以前封装的动画

<script type="text/javascript" src="animate-2.0.1.js"></script>

之后 获取到页面的元素
写好函数就可以了
写图片的运动函数

呼吸轮播图

图片的运动在封装的函数里面不写心得了
写一个定时器 setInterval()
里面写运动函数
定义一个变量，让他++，给一个判断，大于图片最大值后变成最小值，
在封装的函数animate（）里面执行让透明度变化，

后面绑定小圆点给一个排他模型去掉全部的设置，
变量给变成刚刚心得定义的那个

1