自己寫的代碼如果有bug是很容易修復(fù)的， 對自身的提高也很大在沒有閱讀swiper源碼的過程下，我嘗試自己實現(xiàn)一個簡易而不失實用的移動端輪播圖， 經(jīng)過幾個小時的思考和實踐終于還是實現(xiàn)了如圖實現(xiàn)移動端的輪播圖要比pc復(fù)雜。

圖片自動滑動效果很多網(wǎng)站都要用，最近在學(xué)html5就拿這個練練手，發(fā)現(xiàn)用canvas實現(xiàn)起來其實很簡單代碼比較粗糙，有很多改進(jìn)的地方，不過還是先記錄一下一 html文件 html view plaincopy lt！DOCTYPE html HTML5。

1首先我們創(chuàng)建一個簡單的項目，如圖所示包括html，css和img三個2這里是html文件，引入css和html代碼文件，如圖所示3這里是css文件代碼，上面是div和圖片顯示的效果代碼，后面是動畫效果4這里是事件，這里定義了。

創(chuàng)建一個新層，并命名為矩形選擇矩形工具，將矩形轉(zhuǎn)換為按鈕組件，透明度設(shè)置為0，然后右擊編寫代碼等等，做不同的圖片動畫淘寶廣告位有多少個1淘寶首頁上面的flash輪播圖片，5個位置，是鉆石展位來的2中右方。

網(wǎng)頁輪播圖主要包含三部分1輪播圖片2css和html代碼部分3輪播js代碼部分 下面的可以參考lt！DOCTYPE html Document。

下面是可配置輪播動畫代碼 fnslide=functionoptions var defaults= affect1， 1上下滾動 2幕布式 3左右滾動4淡入淡出 time 5000， 間隔時間 speed500， 動畫快慢 dot_text。

要實現(xiàn)圖片滾動輪播，可以有很多方式，無非是通過調(diào)整外圍容器的位置lefttop或者內(nèi)部圖片容器的定位marinleftmargintop來實現(xiàn)的這里我以前者為例向左滾動通常的實現(xiàn)方式是1 有一個外層容器，同時作為。