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);}
