我正在尝试在春季启动项目中使用JavaScript函数每隔几秒钟更改html文档中图像的来源,但是更改来源的典型方法似乎无效。我试图匹配设置图像源的格式,也没有运气。这是我最初设置源的位置:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="zoomOut()">Zoom Out</button>
<button onclick="zoomIn()">Zoom In</button>
<br><br>
<img id = "img1" src="../static/images/6car_1.png"; th:src="@{images/6car_1.png}"/>
</div>
<script>
var zoom = 6;
var initialPath = "../static/images/";
var count = 1;
var isPlaying = true;
playPhotos();
function playPause() {
if (isPlaying)
isPlaying = false;
else{
isPlaying = true;
playPhotos();
}
}
function playPhotos(){
var firstPart = initialPath + zoom + "car_" + count +".png"
var secondPart = "@{images/" + zoom + "car_" + count +".png}"
if(count <=13){
document.getElementById("img1").src = firstPart;
th:src = secondPart;
count++;
}
else{
count = 1;
document.getElementById("img1").src = firstPart;
th:src = secondPart;
}
if(isPlaying){
setTimeout("playPhotos()",200);
}
}
function zoomOut(){
if((zoom - 1) >= 1){
zoom--;
}
}
function zoomIn(){
if((zoom + 1) <= 10){
zoom++;
}
}
</script>
</body>
</html>