大家對于實作輪播圖都有什么辦法呢？
今天我來介紹一種方法
用JS來實作
1.找幾張你喜歡的圖片
2.新建一個HTML頁面
3.在body里面先添加一張圖片
把圖片的id值設為img1，同學們可以隨便設定，寬高等可以根據自己的喜好來
<img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/>
4.在body的下面新建一個script標簽
這里因為我們要做輪播圖，所以我們用回圈定時器
定義一個回圈定時器：每2s切換一張圖片，一共四張圖片，在回圈定時器里面寫一個函式叫changeImg()，定義一個變數 i 用來接受圖片，把圖片的路徑賦值給圖片的src值，圖片每變化一次，我們讓 i 自增，當 i 自增到4時，讓 i 等于1，這樣就可以一直不停地變化下去，達到輪播的效果，
//圖片每2秒變化一次，一共四張圖片
setInterval(changeImg,2000)
let i=1
function changeImg(){
if(i==4){
i=1
}
img1.src='../img/banner_'+i+'.jpg'
i++
}
js的小知識定時器
js的定時器分為兩種
.一次性定時器：兩種方法
- 開始一次性定時器：setTimeout()
- 清除一次性定時器：clearTimeout()
回圈定時器：兩種方法
- 開始回圈定時器：setInterval()
- 清除回圈定時器：clearInterval()
這樣一個簡單的皇帝選妃的案例就寫好了~~~ 下面附上完整的代碼~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
</head>
<body>
<img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/>
</body>
<script>
//1.定義一個回圈定時器：每2s切換一張圖片
setInterval(changeImg,2000)
let i=1
function changeImg(){
if(i==4){
i=1
}
img1.src='../img/banner_'+i+'.jpg'
i++
}
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230734.html
標籤：其他
上一篇：尋求開發合作，請看圖！