Question

我对javascript很新，我想知道是否有可能让javascript在几秒钟后自动更改图像，这是我的大学项目，它可能非常混乱。这是代码：

<!DOCTYPE html>
<html>
<head>
    <title>titleHere</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/menu.css">
    <script>
        function changeImage(imageName){
            var pickImage = document.getElementById("mainImg");
            pickImage.src = imageName;
        }
    </script>
</head>
<body>
    <div class="page_container">

        <div class="menu">
            <div class="logo"></div>
            <nav id="cssmenu">
                <ul>
                    <li><a href="index.html"><span>HOME</span></a></li>
                    <li class="active"><a href="#"><span>GALLERY</span></a></li>
                    <li><a href="#"><span>CONTACT</span></a></li>
                </ul>
            </nav>
        </div>
        <div class="resortTitle"><center>The Reves Recours</center></div>
        <div class="thumbnails" align="center">
            <img src="../images/resort1.jpg" onmouseover="changeImage('../images/resort1.jpg')" alt="Missing Image"/>
            <img src="../images/resort2.jpg" onmouseover="changeImage('../images/resort2.jpg')" alt="Missing Image"/>
            <img src="../images/resort3.jpg" onmouseover="changeImage('../images/resort3.jpg')" alt="Missing Image"/>
            <img src="../images/resort4.jpg" onmouseover="changeImage('../images/resort4.jpg')" alt="Missing Image"/>
        </div>
        <div class="preview" align="center">
            <img src="../images/resortLogoLarge.png" id="mainImg">
        </div>
        <div class="thumbnails" align="center">
            <img src="../images/resort5.jpg" onmouseover="changeImage('../images/resort5.jpg')" alt="Missing Image"/>
            <img src="../images/resort6.jpg" onmouseover="changeImage('../images/resort6.jpg')" alt="Missing Image"/>
            <img src="../images/resort7.jpg" onmouseover="changeImage('../images/resort7.jpg')" alt="Missing Image"/>
            <img src="../images/resort8.jpg" onmouseover="changeImage('../images/resort8.jpg')" alt="Missing Image"/>
        </div>
        <div class="greybar"></div>
        <div class="footer">
            <div class="watmark"> Created by: ---</div>
        </div>
    </div>
</body>

Answer 1

添加

window.onload=function(){
    setInterval(function(){changeName("yourImageName")},2000) //2 seconds
}

到<script>的开头。它将在2秒后改变您的图像。

Answer 2

var images = ['src1','src2','src3'],i=0;
setTimeout(function(){
    changeImage(images[i]);
    i++;
    if(i>images.length)
    i=0;
},3000);

Answer 3

您可以获取所拥有的图像列表数组，然后循环播放延迟，因为您需要使用各种可用于延迟的解决方案，例如在窗口加载等上使用setInterval。

几秒钟后自动更改图像

3 个答案: