輪播圖實現想法

輪播圖一個基礎的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