Javascript 几秒钟后自动更改图像_Javascript_Html

Javascript 几秒钟后自动更改图像

javascript html

Javascript 几秒钟后自动更改图像,javascript,html,Javascript,Html,我对javascript非常陌生，我想知道是否有可能让javascript在几秒钟后自动更改图像，这是我的大学项目，可能会非常混乱。代码如下： <!DOCTYPE html> <html> <head> <title>titleHere</title> <link rel="stylesheet" href="../styles/main.css"> <link rel="stylesheet"

我对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>

加上

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

一直到一开始。它将在2秒后更改您的图像。

您可以获得您拥有的图像列表数组，然后根据需要使用各种延迟解决方案（如在窗口加载时使用setInterval等）循环执行延迟。

这样会将其更改为我设置的图像，而不是您的ImageName，但如果我想把它换成下一张缩略图中的图片，我该怎么办呢？

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