在春季启动中从 Java 脚本更改图像源
我试图在春季启动项目中每隔几秒钟使用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>
慕雪64428642回答
-
梦里花落0921
我编辑了它，它的工作原理，因为我创建了变量“缩放”，“正在播放”并称为playPhotos（）。您没有指定这些详细信息？如果遇到函数操作以外的错误，请将所有代码作为代码段上传。我会相应地更新我的答案。var initialPath = "../static/images/";var count = 1;var isPlaying = true;let zoom = "zoom"playPhotos()function playPhotos() { var firstPart = `${initialPath}${zoom}car_${count}.png`; //try var secondPart = `@{images/${zoom}car_${count}.png`; // try if (count <= 13) { document.getElementById("img1").src = firstPart; th: src = secondPart; count++; } else { count = 1; document.getElementById("img1").src = firstPart; th: src = secondPart; count++; } if (isPlaying) { setTimeout("playPhotos()", 200); }}<img id="img1" src="../static/images/6car_1.png" ; th:src="@{images/6car_1.png}" />展开代码段 -
吃鸡游戏
var secondPart = "/images/"+zoom+"car_"+count+".png";document.getElementById("img1").src = secondPart;
随时随地看视频慕课网APP
相关分类
JavaScript