Question

我在div中使用背景图片进行幻灯片放映，并且在单击按钮时尝试停止它。

function fadeTitles() {

$('#slideimg').addClass('flatironimg').fadeIn(500);
$('#slideimg').delay(4000).fadeOut(800, function () {
$('#slideimg').removeClass('flatironimg').addClass('kaynesimg').fadeIn(600);
$('#slideimg').delay(4000).fadeOut(800, function () {
$('#slideimg').removeClass('kaynesimg').addClass('chiassoimg').fadeIn(600);
$('#slideimg').delay(4000).fadeOut(800, function () {
$('#slideimg').removeClass('chiassoimg');
setTimeout('fadeTitles();', 0);
});
});
});

}


$('#slideimg').ready(function() {

fadeTitles();  
});

这是按钮信息。（这适用于自动推进幻灯片）

$(function(){

    $('#flatironbtn').click(function(){
        if($('#slideimg').hasClass('kaynesimg'))
        {
           $('#slideimg').fadeOut( 600, function(){             $('#slideimg').removeClass('kaynesimg').addClass('flatironimg').fadeIn(600); });
        }
        else if($('#slideimg').hasClass('chiassoimg'))
        {
          $('#slideimg').fadeOut( 600, function(){              $('#slideimg').removeClass('chiassoimg').addClass('flatironimg').fadeIn(600); });
        }
        else 
        {
        }
    });   


});

Answer 1

欢迎使用Stack Overflow。我建议你在解决jquery之前找到一些关于javascript的教程。完成一些教程将帮助您编写更好的代码，并了解如何在遇到困难时更好地构建问题。

看起来你已经制作了3个具有背景图像属性的CSS类 - flatironimg，kaynesimg和chiassoimg。您的站点会自动通过slideimg div循环显示三个图像，但也希望为用户提供一个按钮来手动推进幻灯片。用户单击该按钮后，您不再希望幻灯片放映自动继续。

我不是jquery专家，但我可以给你一些应该帮助你的代码。我将在下面一点一点地解释它 - 重构/来自更高级用户的贡献欢迎。

使用Javascript：

<script type="text/javascript">
  var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
  var slideIndex = -1;
  var automatic = true;

  function nextSlide(){
    $('#slideimg').fadeOut(600,function(){
      slideIndex ++;
      // Get the next highest item
      if(slideIndex >= CLASS_ARRAY.length){
      // If we run out of items, get the first one instead
        slideIndex = 0;
      }
      $('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
      // Swap out the old class attribute for the next one in our array
      $('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
      // Set the animation and have it autoadvance if appropriate
    });
  }

  function autoAdvance(){
    if(automatic) {
      nextSlide();
    }
  }

 $(document).ready(function () { 
    $('#flatironbtn').click(function(){
      automatic = false;
      nextSlide();
    });
    $('#resumebtn').click(function(){
      automatic = true;
      nextSlide();
    });
    nextSlide();

  });

</script>

确定。我们在这里做什么。首先，我将您的图像序列从硬编码的jquery动画链中移到了一个数组中。这将有助于您轻松更改幻灯片的顺序，添加新样式而无需重新编码，并保持代码可读。我还设置了一个索引来跟踪我们在课程列表中的位置，以及一个跟踪我们是否应该自动推进节目的标志。

  var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
  var slideIndex = -1;
  var automatic = true;

接下来我已经定义了一个javascript函数来处理动画并加载下一张幻灯片。该函数是一些可重用的代码，可以完成一件事。现在，我们不是手动将大量动画链接在一起，而是编写代码以使幻灯片动画一次并让它调用autoAdvance函数以查看它是否应该继续。

  function nextSlide(){
    $('#slideimg').fadeOut(600,function(){
      slideIndex ++;
      // Get the next highest item
      if(slideIndex >= CLASS_ARRAY.length){
      // If we run out of items, get the first one instead
        slideIndex = 0;
      }
      $('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
      // Swap out the old class attribute for the next one in our array
      $('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
      // Set the animation and have it autoadvance if appropriate
    });
  }

autoAdvance功能非常简单。它会检查我们是否处于自动播放模式。如果是，它会使用上面的函数加载下一张幻灯片。

  function autoAdvance(){
    if(automatic) {
      nextSlide();
    }
  }

最后，我们为我们的按钮设置javascript来控制幻灯片放映，并自动启动第一个动画：

  $(document).ready(function () { 
    $('#flatironbtn').click(function(){
      automatic = false;
      // Once the user has clicked, auto-play will turn off
      nextSlide();
    });
    $('#resumebtn').click(function(){
      automatic = true;
      // Give the user a resume button to pick up where they left off
      nextSlide();
    });
    nextSlide();

  });

另外，感谢Chinmayee清理代码格式。通过正确地缩进代码，向人们清楚地展示您正在尝试做的事情总是有帮助的。

单击按钮时停止幻灯片功能

1 个答案: