Question

示例，我想在前10秒显示image1.jpg，然后在接下来的10秒内显示image2.jpg

<HTML>
  <body>
     <img src="image1.jpg" aftersometime='this.src="image2.jpg"' />
       <!--  -->
  </body>
</HTML>

Answer 1

尝试：

HTML：

<img id ="image" src="/image1.jpg" />

JS：

setInterval(function(){
var src=document.getElementById("image").src;
    if(src.indexOf("image1") != -1){
    document.getElementById("image").src="image2.jpg"
    }
    else{
    document.getElementById("image").src="image1.jpg"
    }


},10000);

DEMO

Answer 2

你需要的函数是window.setInterval（）或window.setTimeout（），用于计时和类似document.getElementById（）。setAttribute（“src”，“newpath”）;

如果你想用一个新的属性来做，比如aftersometime =“”我建议把它称为data-aftersometime =“”（根据HTML5标准）并省略this.src部分，你需要一个ID ：

IMG-代码：

<img src="image1.jpg" id="myimage" data-aftersometime="image2.jpg" />

Javascript代码：

setTimeout(function() {
   var imgref = document.getElementById("myimage");
   imgref.setAttribute("src", imgref.getAttribute("data-aftersometime"));
}, 10*1000);

Answer 3

在旧的堆栈溢出问题上发现这个尝试这个：）

javascript Change background Based on Time

通过链接查看。主要代码在下面

    </body>
    <script type="text/javascript">
        var currentTime = new Date().getHours();
        if(5 < currentTime && currentTime < 18){
            if (document.body) {
                document.body.background = 'images/bg-day.png';
            }
        } else {
            if (document.body) {
                document.body.background = 'images/bg-night.png';
            }
        }
   </script>

Answer 4

使用此

图片代码

<img src="image1.jpg" id="changeimg" aftersometime='this.src="image2.jpg"' />

<强>的Javascript

setInterval(function(){
      $("#changeimg").attr("src","");
  },10000);

您必须使用数组构建此代码....

Answer 5

您可以使用javascript函数轻松完成此操作，方法是使用

YourElementSelector.setAttribute（＆＃34; SRC＆＃34;＆＃34;路径到您的图像＆＃34）;

您只需要创建一个根据您选择的间隔切换图像路径的功能。

或者您可以将图像设置为背景图像，并使用javascript将CSS更改为指向您想要的新背景。

Answer 6

你的img需要一个ID

  <img id="myimg" src="image1.jpg" />

在JavaScript中，您可以执行类似的操作：

var IMG_URL1 = "image1.jpg"
var IMG_URL2 = "image2.jpg"

setInterval(function() {
    var myimg = document.getElementById('myimg');
    if (myimg.src === IMG_URL1) {
        myimg.src = IMG_URL2;
    } else {
        myimg.src = IMG_URL1;
    }
}, 10000);

我想随着时间改变我页面上的图像

6 个答案: