本文在介紹如何使用css3實(shí)現(xiàn)圖片的輪播特效的基礎(chǔ)上，重點(diǎn)探討了其具體步驟，本文內(nèi)容緊湊，希望大家可以有所收獲大家在瀏覽網(wǎng)頁(yè)的過(guò)程中，會(huì)遇見(jiàn)一種名叫圖片輪播的特殊效果在同樣的位置不同的圖片會(huì)根據(jù)時(shí)間的變化循環(huán)播放。

你把整個(gè)ul想成是一張圖片，你要做的就是把ul左右移動(dòng)，然后在ul外面可以套一個(gè)div，樣式為overflowhidden，關(guān)于復(fù)位，你可以用％運(yùn)算，當(dāng)移動(dòng)到最后一個(gè)li的時(shí)候，跳到第一個(gè)li去。

下面的數(shù)字其實(shí)是一個(gè)小列表ul li，你可以把li設(shè)置出邊框 設(shè)置borderradius屬性為50%，就能實(shí)現(xiàn)圓圈效果了123 libordersolid 1px purpleborderradius50%maginright10px 即可實(shí)現(xiàn)數(shù)字邊框變成圓形。

主要表現(xiàn)在以下幾個(gè)方面 1輪播圖要適應(yīng)不同寬度dpr的屏幕 2需要使用 touch相關(guān)的事件 3不同機(jī)型對(duì) touch事件支持的不太一樣，可能會(huì)有一些兼容性問(wèn)題 4手指移動(dòng)圖片一部分距離，剩下的距離需要自動(dòng)完成 5。