Question

制作幻灯片，在js文件中每7秒更改一次主背景图片。唯一的问题是订单是随机的，除了第一张图片。我开始搞乱它，现在画面不会改变。请帮忙！

这是我的索引：

SELECT * FROM MAIN_TABLE M
       WHERE EXISTS (
                SELECT 1 
                  FROM  TABLE2 C
                 WHERE M.CHECK_FIELD = C.FIELD1¦¦'XX'¦¦C.FIELD2¦¦'ZZ'
            )

我的JS：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link type="text/css" rel="stylesheet" href="main.css"/>

</head>
<body>
<div id="topdiv">
<h1 id="title" class="title">Photography</h1>
<div style="text-align: center">
    <button id="aboutbutton" class="button">About</button>

    <button id="contactbutton" class="button">Contact</button>

    <button id="picturesbutton" class="button">Pictures</button>
</div>
</div>

<img id="photo" src="pictures/1.jpg">
<script type="text/javascript"/>


    </body>
    </html>

Answer 1

在设置属性后添加此代码。

myImage.src = imageArray[imgIndex];

Answer 2

我修改了下面的代码并检查了我的本地。现在它也有第一张图像的随机图像。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Photography</title>
    <link type="text/css" rel="stylesheet" href="main.css"/>

</head>
<body>
    <div id="topdiv">
        <h1 id="title" class="title">Photography</h1>
        <div style="text-align: center">
            <button id="aboutbutton" class="button">About</button>

            <button id="contactbutton" class="button">Contact</button>

            <button id="picturesbutton" class="button">Pictures</button>
        </div>
    </div>

    <img id="photo">
    <script type="text/javascript">
        var myImage = document.getElementById("photo");
        var imageArray = ["pictures/1.JPG", "pictures/2.JPG", "pictures/3.JPG", "pictures/4.JPG", "pictures/5.JPG", "pictures/6.JPG", "pictures/7.JPG", "pictures/8.JPG", "pictures/9.JPG", "pictures/10.JPG"];
        var imgIndex = getRandomInt(0, imageArray.length);
        var isIntervalRunning;

        function changeImage() {
            debugger;
            myImage.setAttribute("src", imageArray[imgIndex]);
            imgIndex++;
            if (imgIndex >= imageArray.length) {
                imgIndex = 0;
            }
        }

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        var intervalHandle = setInterval(changeImage, 6000);
        document.getElementById("title").onclick = function () {
            location.href = "index.html";
        }
        document.getElementById("aboutbutton").onclick = function () {
            location.href = "about.html";
        }
        document.getElementById("contactbutton").onclick = function () {
            location.href = "contact.html";
        }
        document.getElementById("picturesbutton").onclick = function () {
            location.href = "pictures.html";
        }
        changeImage();
    </script>

</body>

随机图像顺序幻灯片

2 个答案: