<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div{
width:900px;
height:400px;
margin:0 auto;
}
div img{
width:900px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
// window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
}
var pathArr = new Array(
"img/1.jpg",
"img/1.png",
"img/2.jpg",
"img/2.png"
);
var index = 0;
function changeImg(){
nextImg();
}
function preImg(){
myimg = document.getElementById("myimg");
index--;
if(index < 0){
index = pathArr.length-1;
}
myimg.src = pathArr[index];
}
function nextImg(){
myimg = document.getElementById("myimg");
index++;
if(index >= pathArr.length){
index = 0;
}
myimg.src = pathArr[index];
}
</script>
</head>
<body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.png" id="myimg" />
</div>
</body>
</html>