html怎么设置图片自动播放,html/js/css学习之路 - 轮播图自动播放和手动控制

html文件

Title

上一个

下一个

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

}