純HTML+JS實現輪播

時間 2019-11-07

標籤 html+js html 實現欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>輪播原理圖</title>
</head>
<body>
<div>數組

<button onclick="prev()"> 上一個 </button>
<img id="slider" src="image/1.jpg" />
<button onclick="next()"> 下一個 </button>
</div>ide

<script>spa

var images = [
"image/1.jpg",
"image/2.jpg",
"image/3.jpg"
];xml

<!--定義一個開始數0>
var num = 0;htm

<!下一個按鈕點擊事件-->事件

function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {　　　　
num = 0;
}
slider.src = images[num];　　　　
}圖片

ip

function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {　　　　　　　　　　
num = images.length-1;
}
slider.src = images[num];　　　　
}
</script>
</body>
</html>utf-8

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。