圖像幻燈片
現(xiàn)在我們可以創(chuàng)建一個示例圖像幻燈片項目。將使用“下一個”和“上一個”按鈕更改圖像。
現(xiàn)在，我們來創(chuàng)建我們的HTML，其中包括一個圖像和兩個導(dǎo)航按鈕：
<div> <button> 上一個 </button> <img id="slider" src="https://www.w3cschool.cn/statics/images/logo.png" /> <button> 下一個 </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ù)器的三個示例圖像。您可以使用任意數(shù)量的圖像。
arr = 'A','B','C';
圖像幻燈片
現(xiàn)在我們需要處理 "上一個" 和 "下一個" 按鈕點(diǎn)擊并調(diào)用相應(yīng)的功能來更改圖像。
HTML:
<div> <button onclick="prev()"> 上一個 </button> <img id="slider" src="http://ipnx.cn/statics/images/1.png" /> <button onclick="next()"> 下一個 </button> </div>
JS:
var images = [
"http://ipnx.cn/statics/images/1.png",
"http://ipnx.cn/statics/images/2.png,
"http://ipnx.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)前圖像。下一個和上一個按鈕點(diǎn)擊由他們相應(yīng)的功能來處理，這些功能會將圖像的源更改為數(shù)組中的下一個/上一個圖像。