纯HTML+JS实现轮播

<!DOCTYPE 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="data:image/1.jpg" />
<button onclick="next()"> 下一个 </button>
</div>

<script>

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

<!--定义一个开始数0>
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];　　　　
}
</script>
</body>
</html>

巴特西

纯HTML+JS实现轮播

最新文章

热门文章