輪播圖心得

輪播圖實現想法

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、輪播圖 1.傳統輪播圖: 運動的封裝:(1)定時器的使用,創建定時器setInterval();每隔指定的時間...
    麥卡洛閱讀 676評論 0 0
  • 輪播圖有多種多樣的形式,但是本質是類似的。對于傳統輪播圖來說,步驟基本如下: 1:建立一個最大的div,里面...
    qzuser_1d64閱讀 1,251評論 0 0
  • 輪播圖 寫輪播圖之前我們要認識到幾個問題:一、什么是輪播圖?二、怎么實現輪播效果?三、輪播圖還有什么小功能可以實現...
    楓林晚落閱讀 987評論 1 2
  • 思路: 1.點擊按鈕,改變顯示的圖片。同時改變對應小圓點的顏色。 2.點擊小圓點,改變小圓點顏色,顯示對應的圖片。...
    這就是小七de簡書閱讀 481評論 0 0
  • 描述 泛型,即“參數化類型”。一提到參數,最熟悉的就是定義方法時有形參,然后調用此方法時傳遞實參。 參數化類型就是...
    pkqgo閱讀 587評論 0 0