<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极简轮播图</title>
<style>
/* 这里控制鼠标悬停时图片上浮10px，当然在JS中也可以完成 */
img:hover {
transform: translate(0, 0px);
padding-bottom: 10px;
}
</style>
</head>
<body>
<div>
<!--添加两个按钮和默认出现的图-->
<button onclick="prev()"> 上一个 </button>
<!-- 设置鼠标移入和移出时的触发事件 -->
<img id="slider" src="http://cdn.wuliwu.top/girlcar-lengthcenter" onmousemove="clearTimeout(meter1)"
onmouseout="int()" />
<button onclick="next()"> 下一个 </button>
</div>
<script>
var images = [
"http://cdn.wuliwu.top/girlcar-lengthcenter",
"http://cdn.wuliwu.top/girlcat-lengthcenter",
"http://cdn.wuliwu.top/girleat-lengthcenter"
];
var slider = document.getElementById("slider");
var num = 0;
function next() {
num++;
if (num >= images.length) {
num = 0;
}
slider.src = images[num];
}
// 上一个按钮点击事件
function prev() {
num--;
if (num < 0) {
num = images.length - 1;
}
slider.src = images[num];
}
// 计时器触发函数
function int() {
next();
meter1 = setTimeout('int()', 2000);
}
// 这里要先调用一下，在页面打开就执行轮播
int();
</script>
</body>
</html>