html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/circle_image.js"></script>
</head>
<body>
<!--轮播图-->
<div id="imageBack">
<img src="../images/1.jpg" id="testImage" style="width: 400px;">
</div>
<!--手动控制按钮-->
<div id="buttonBack">
<button id="last" style="width: 200px;height: 40px">上一个</button>
<button id="next" style="width: 200px;height: 40px">下一个</button>
</div>
</body>
</html>
js文件
var currentImage = 1; //从1开始
var imageCount = 5; //图片总数
window.onload = function () {
//手动点击上一张
document.getElementById("last").addEventListener("click", function () {
if (currentImage > 1){
currentImage -- ;
} else if (currentImage = 1){
currentImage = imageCount;
}
handChangeImage();
}, false);
//手动点击下一张
document.getElementById("next").addEventListener("click", function () {
if (currentImage < imageCount){
currentImage ++ ;
} else if (currentImage = imageCount){
currentImage = 1;
}
handChangeImage();
}, false);
//2秒后执行
setTimeout(selfChangeImage, 2000);
};
//手动控制上一张下一张
function handChangeImage() {
var imageObj = document.getElementById("testImage");
imageObj.src = "../images/"+ currentImage +".jpg";
}
//自动循环
function selfChangeImage() {
if (currentImage < imageCount){
currentImage ++ ;
} else if (currentImage = imageCount){
currentImage = 1;
}
var imageObj = document.getElementById("testImage");
imageObj.src = "../images/"+ currentImage +".jpg";
//2秒后执行
setTimeout(selfChangeImage, 2000);
}