3 秒后更改 src答案

【问题标题】：Changing src after 3 seconds3 秒后更改 src
【发布时间】：2016-11-04 22:55:11
【问题描述】：

我正在尝试在循环 3 秒后更改具有“bg”类的图像的 src 属性。它从“bg1.jpg”变为“bg5.jpg”。出于某种原因，我的代码无法正常工作，并且我没有收到任何错误。

$(document).ready(function(){

var $bg = $('.bg');

function bgChange() {
  var i = 1;
  while ( i < 6 ) {
    var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg';
    setTimeout($bg.attr('src', background), 1000);
    i++;
    if ( i === 5 ) {
      i = 1;
    }
  }
}

bgChange();
//------------------------------------
});

【问题讨论】：

那么，您的 JavaScript 文件中有 PHP，我猜您的 JavaScript 文件没有通过您的 PHP 处理器提供服务？ -- 除非你的 JavaScript 是内联的。
...setTimeout 也在无限循环中被调用！ while(i
setTimeout 根本不会做任何事情，直到您的 JavaScript 完成工作。呼叫已排队。

标签： javascript jquery html while-loop settimeout

【解决方案1】：

您应该使用间隔时间一一更改src，因此不要使用while || for 循环。

用setTimeout()试试这个例子

var $bg = $('.bg');

function bgChange(i) {
  if(i == 6)i = 1; // reset
  var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg';
  $bg.attr('src', background); // change src
  setTimeout(function(){bgChange(i++)}, 3000); // call again after 3 sec
}

bgChange(1);

【讨论】：

这在我按照@Lee Kowalkowski 的建议取出 php 后就起作用了。谢谢。

【解决方案2】：

您可以使用setInterval() 来做到这一点

$(document).ready(function(){
  // run background change function
  bgChange(5); // 5 is number of images
});

// functions
function bgChange(num_of_images) {
  var $bg = $('.bg');
  var i = 1;
  setInterval(function(){
      i = (i < num_of_images) ? i + 1 : 1; 
      var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg';
      $bg.attr('src', background);
  } , 3000);
}

测试代码

$(document).ready(function(){
  // run background change function
  bgChange(5); // 5 is number of images
});

// functions
function bgChange(num_of_images) {
  var $bg = $('.bg');
  var i = 1;
  setInterval(function(){
    i = (i < num_of_images) ? i+1 : 1; 
  	/*
      var background = '<?php echo $siteroot; ?>/img/bg' + i + '.jpg';
      $bg.attr('src', background);
    */
    $bg.html('bg'+i);
    
  } , 3000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">bg1</div>

【讨论】：

【解决方案3】：

您将同时启动所有计时器。

如果它执行任何操作（我不确定它是否执行，看到它不是函数体），它会等待 1000 毫秒，然后一次调用该函数 5 次，然后不再调用该函数。

你可以做的是一个延迟后会调用自己的函数，看看sn-p。

var imageRoot = "/images/backgrounds/"
var backgrounds = [
  "http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg",
  "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg",
  "http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg",
  imageRoot + "bg4.jpg",
  imageRoot + "bg5.jpg",  
]
function UpdateImageBackground(i, images) {
  // Make sure i doesn't go past images.length
  i = i%images.length;
  
  var bgs = document.getElementsByClassName("bg");
  for(var j=0; j<bgs.length; j++) {
    bgs[j].src = images[i];
  }
  
  // Call itself again after 3000 miliseconds
  setTimeout(function() {
    UpdateImageBackground(i+1, images);
  }, 3000);
}
UpdateImageBackground(0, backgrounds);

&lt;img class="bg" /&gt;

【讨论】：

【解决方案4】：

jQuery(function($) {

  var $bg = $('.bg')
  var root = '<?php echo $siteroot; ?>'
  var i = 0

  function bgChange() {
    var background = root + '/img/bg' + (++i) + '.jpg'
    console.log(background)
    $bg.attr('src', background)
    i %= 6
    setTimeout(bgChange, 1000)
  }

  bgChange()
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案5】：

声明你的函数。
setInterval 并引用您的函数

var index = 1;
function bgChange(){
    if(index == 6){
        index = 1;
    }
    document.getElementById("image").src = "bg" + num + ".jpg";
    index += 1;
}
var i = setInterval(bgChange, 3000);

【讨论】：

你的意思是 setTimeout()
@magreenberg 嗯？ setTimeout 只执行一次。
我的代码适合我。事实上，我也做同样的事情。我有一个修改 img 标签的 src attrb 的功能。编辑显示我是如何完成的