JS实现---图片轮播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS幻灯代码</title>
<script>
function show(num) {
var obj0=document.getElementById("image_0");
switch (num){
case 1:
obj0.src="../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg";
break;
case 2:
obj0.src="../image/00fba12e3275496a904141a1303fdcf3.jpg";
break;
case 3:
obj0.src="../image/3b8ec93770744ff4ad12e25ec4a200b1.jpg";
break;
case 4:
obj0.src="../image/1fbc738f98634c0f80f283e14455369c.jpg";
break;
}
}
//定义定时器，每隔三秒就换图
var index=1;
function IMG() {
setInterval(function () {
index++;
if (index>=4){
index=1;
}
show(index);
},3000);
}
</script>
</head>
//需要注意的地方是：当页面加载完的时候就需要轮播图片 需要在body里边调用onload方法
<body onload="IMG()">
<div style="width: 300px;height: 300px">
<div style="width: 100%;height: 100%">
<img id="image_0" src="../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg" />
<div style="position:absolute;left:150px;top:310px;">
<a href="javascript:show(1)">1</a>
<a href="javascript:show(2)">2</a>
<a href="javascript:show(3)">3</a>
<a href="javascript:show(4)">4</a>
</div>
</div>
</div>
</body>
</html>
