在春季启动时从JavaScript更改图像源

问题描述 投票:0回答:1

我正在尝试在春季启动项目中使用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>
javascript java html spring-boot
1个回答
0
投票
我对其进行了编辑,由于它创建了变量“ zoom”,“ isPlaying”并称为playPhotos(),因此它可以正常工作。您没有指定这些详细信息吗?如果您有函数操作以外的错误,请上传所有代码作为摘要。我将相应地更新我的答案。
© www.soinside.com 2019 - 2024. All rights reserved.