Question

我正在尝试使用＆＃34; bg＆＃34;的类来更改图像的src属性。循环3秒后。它来自＆＃34; bg1.jpg＆＃34;到＆＃34; bg5.jpg＆＃34;。由于某种原因，我的代码不起作用，我没有收到任何错误。

$(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();
//------------------------------------
});

Answer 1

您可以使用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>

Answer 2

您应该使用间隔时间逐个更改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);

Answer 3

您正在立即启动所有计时器。

如果它做了什么（我不确定它，看到它不是一个函数体），它将等待1000ms，然后一次调用该函数5次，然后永远不会调用该函数试。

你可以做的是一个在延迟后调用自己的功能，看看片段。

＆＃13;

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);

＆＃13;

<img class="bg" />

＆＃13;

Answer 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()
})

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

Answer 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);

3秒后更改src

5 个答案: