Question

有人可以帮忙吗？我显然是一个新秀，因为这并不难，但我无法弄明白。这在4个背景图像之间旋转，我想要做的就是让它在第一个图像（循环）重新开始并再次运行该功能。

真的很感激帮助！

$(document).ready(function(){ 


$(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-1.jpg') %>)"
    );
    setTimeout(function(){
            $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-1.jpg') %>)"
        ).fadeOut(function(){
            $(this).css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-2.jpg') %>)"
            ).fadeIn();
        });
        setTimeout(function(){
                $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-2.jpg') %>)"
            ).fadeOut(function(){
                $(this).css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-3.jpg') %>)"
                ).fadeIn();
            });
            setTimeout(function(){
                    $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-3.jpg') %>)"
                ).fadeOut(function(){
                    $(this).css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-4.jpg') %>)"
                    ).fadeIn();
                });
            }, 3000);
        }, 3000);
    }, 3000);


});

Answer 1

以下是一些示例代码，可以执行您想要的操作。您需要更改我标记的位置以使用特定于您的用例的代码。这项工作的原因是图像存储在一个数组中，然后您更新下一个图像的索引。在开头重新开始的关键是% 4，这使得可能的值只有0,1,2或3。

编辑：我还添加了一种使用setTimeout做同样事情的方法，这是处理更安全的时序的另一种方法，但也使得时间工作略有不同，因为计时器在.fadeOut之后启动被称为而不是之前。

＆＃13;

$(function(){
  /* This is the array you should use
  var images = [
    <%= asset_path('bg-1.jpg') %>,
    <%= asset_path('bg-2.jpg') %>,
    <%= asset_path('bg-3.jpg') %>,
    <%= asset_path('bg-4.jpg') %>;
  */
  // This is just so the demo can work
  var images = ['image1', 'image2', 'image3', 'image4'];
  
  var nextImageIndex = 1;
  
  // Set first image
  $('.wrapper').text(images[0]); // Adjust this for your use case
  
  setInterval(function() {
    $('.wrapper').fadeOut(function() {
      $(this).text(images[nextImageIndex]); // Adjust this for your use case
      nextImageIndex = (nextImageIndex + 1) % 4;
    }).fadeIn();
  }, 3000);

  /*
   * Here is an example using setTimeout since it can be safer
   * than setInterval. This will not make the image update every
   * 3 seconds though, it will actually update ~3 seconds after
   * you make the call to fadeOut.
   */
  
  var nextImageIndexForTimeout = 1;
  
  function updateImage() {
    $('.wrapper2').fadeOut(function() {
      $(this).text(images[nextImageIndexForTimeout]); // Adjust this for your use case
      nextImageIndexForTimeout = (nextImageIndexForTimeout + 1) % 4;
    }).fadeIn();
    
    setTimeout(updateImage, 3000);
  }
  
  // Set first image
  $('.wrapper2').text(images[0]); // Adjust this for your use case
  
  setTimeout(updateImage, 3000);

});

＆＃13;

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

＆＃13;

Answer 2

这不是要让jquery连续循环，而是你想要的是拥有一系列图像URL，然后选择＆＃39; next＆＃39;每次定时器发射时都会发出一声有几种方法可以做到这一点，但由于您已经熟悉setTimeout，我将使用它。

var images = [img0, img1, img2, img3];  // those should be the URLs to your background images

function setNextImage(){
   var image = images.shift(); // image is now the first image in the array.
   images.push(image); // place that one back on the end of the array.
   $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url("+image+")"
    );
   setTimeout(setNextImage, 3000);
};

$(function(){ 
  setNextImage();
});

如何让JQuery不断循环

2 个答案: