輪播圖現(xiàn)在有很多現(xiàn)成的組件，網(wǎng)上也有很多的教程來(lái)教大家寫(xiě)一個(gè)輪播圖，這里我們用最簡(jiǎn)單的方式去實(shí)現(xiàn)一個(gè)輪播圖。

首先我們寫(xiě)出我們需要的頁(yè)面元素，很簡(jiǎn)單，一個(gè)p嵌套著兩個(gè)p+一個(gè)圖片。

然后我們寫(xiě)一下這幾個(gè)樣式

.box { width: 100%; height: 100%; padding-top: 10%; display: flex; align-content: flex-start; align-items: center; justify-content: center;} /* 采用絕對(duì)定位，在當(dāng)前頁(yè)面定位切換按鈕的位置 */.box-left { position: absolute; width: 50px; height: 200px; top: 50%; left: 0; transform: translateY(-50%); background-color: rgb(13, 167, 202); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.box-right { position: absolute; width: 50px; height: 200px; top: 50%; right: 0; transform: translateY(-50%); background-color: rgb(13, 167, 202); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.swiper-img { width: 100%; height: 100%;}

最后我們?cè)賹?xiě)下切換用的兩個(gè)函數(shù)

//獲取輪播圖元素 var el = document.getElementById(‘swiper’); //待切換輪播圖路徑，組合成數(shù)組 var image = [‘//imgq8.q578.com/ef/0621/4609e78737f709a1.jpg’, ‘image/2.jpg’, ‘image/3.jpg’, ‘image/4.jpg’] //當(dāng)前輪播圖數(shù)組下標(biāo) var i = 0; function left() { //默認(rèn)賦值第一個(gè)路徑 el.src = image[i]; //路徑下標(biāo)+1，切換路徑 i++; //路徑下標(biāo)超出數(shù)組長(zhǎng)度，賦值為0 if (i == image.length) { i = 0; } } function right() { //默認(rèn)賦值第一個(gè)路徑 el.src = image[i]; //路徑下標(biāo)-1，切換路徑 i–; //路徑下標(biāo)太低，賦值為數(shù)組長(zhǎng)度-1 if (i == -1) { i = image.length – 1; } }

JS函數(shù)已經(jīng)盡量多的添加了注釋?zhuān)瑧?yīng)該非常好理解。以后無(wú)論有多少?gòu)垐D片，都只需要把圖片路徑加到圖片數(shù)組里就可以了。想自動(dòng)切換就加個(gè)定時(shí)器。

收工。