圖像幻燈片
現(xiàn)在我們可以創(chuàng)建一個(gè)示例圖像幻燈片項(xiàng)目。將使用“下一個(gè)”和“上一個(gè)”按鈕更改圖像。
現(xiàn)在，我們來創(chuàng)建我們的HTML，其中包括一個(gè)圖像和兩個(gè)導(dǎo)航按鈕：
<div> <button> 上一個(gè) </button> <img id="slider" src="https://www.w3cschool.cn/statics/images/logo.png" /> <button> 下一個(gè) </button> </div>
接下來，讓我們在數(shù)組中定義我們的示例圖像：
var images = [ "https://www.w3cschool.cn/statics/images/1.png", "https://www.w3cschool.cn/statics/images/2.png, "https://www.w3cschool.cn/statics/images/3.png" ];
提示: 我們將使用我們上傳到我們的服務(wù)器的三個(gè)示例圖像。您可以使用任意數(shù)量的圖像。
arr = 'A','B','C';
圖像幻燈片
現(xiàn)在我們需要處理 "上一個(gè)" 和 "下一個(gè)" 按鈕點(diǎn)擊并調(diào)用相應(yīng)的功能來更改圖像。
HTML:
<div> <button onclick="prev()"> 上一個(gè) </button> <img id="slider" src="http://m.miracleart.cn/statics/images/1.png" /> <button onclick="next()"> 下一個(gè) </button> </div>
JS:
var images = [
"http://m.miracleart.cn/statics/images/1.png",
"http://m.miracleart.cn/statics/images/2.png,
"http://m.miracleart.cn/statics/images/3.png"
];
var num = 0;
function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {
num = images.length-1;
}
slider.src = images[num];
}提示: num 變量保存當(dāng)前圖像。下一個(gè)和上一個(gè)按鈕點(diǎn)擊由他們相應(yīng)的功能來處理，這些功能會(huì)將圖像的源更改為數(shù)組中的下一個(gè)/上一個(gè)圖像。