Question

我想要做的是有一个滑块，DIV向左移动＆amp;对。代码如下：

<script type="text/javascript">
var $slider;
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

 $(function() {
    $slider = $('.slidemid');
    $slider.fadeOut();

    // set active classes
    $slider.first().addClass('active');
    $slider.first().fadeIn($transition_time).css('display', 'inline-block');

    // auto scroll 
    setInterval(function () {
      slideright(); }, $transition_time + $time_between_slides );

    $('.slidelefta').click(function() {slideleft(); return false;});
    $('.sliderighta').click(function() {slideright(); return false;});

 });

 function slideright() {
 $slider = $('.slidemid');
  var $i = $slider.find('.active').index();

  $slider.eq($i).removeClass('active');
  $slider.eq($i).fadeOut($transition_time);

  if ($slider.length == $i + 1) $i = -1; // loop to start

  $slider.eq($i + 1).fadeIn($transition_time).css('display', 'inline-block');
  $slider.eq($i + 1).addClass('active');
}
function slideleft() {
 $slider = $('.slidemid');
  var $i = $slider.find('.active').index();

  $slider.eq($i).removeClass('active');
  $slider.eq($i).fadeOut($transition_time);

  if ($i == 0) $i = $slider.length; // loop to end

  $slider.eq($i - 1).fadeIn($transition_time).css('display', 'inline-block');
  $slider.eq($i - 1).addClass('active');
}

</script>

初始fadeOut，fadeIn和addClass（在document.ready函数中）执行得很好。

slideright()和slideleft()的来电永远不会被执行。

Answer 1

如果您没有在控制台上收到任何错误，那么我认为它是javascript范围的问题。当您在匿名函数的函数内调用函数slideright（）和sildeleft（）时，这些函数在全局范围内的匿名函数之外定义。

将匿名函数视为一个类，并且您正在调用类函数内的函数，并且这些函数不属于该类范围。

解决方案（我还没有确认代码，我很确定应该有效）：

在匿名函数$（function（）或
在构造函数或对象中包装这些函数

function slide（）{ this.slideRight = function（）{} this.slideLeft = function（）{}

} //像这样调用它 var slider = new Slide（）; slider.slideRight //用于slideRight slider.slideLeft // for slideLeft

Answer 2

查看此JSBin我粘贴您的代码并简化了一些行，因为调用定义的函数是问题所在。你可以在控制台中看到那个实际上，该函数是从setInterval调用的。此外，我想在此指出，最好在范围内定义函数，就像在JSBin演示中声明它们的方式一样。为什么？好吧，如果你在范围之外定义它们，在全局范围内，一个非常糟糕的人可以在控制台slideright = function () { evilXSShere; }中执行，并且你的功能被覆盖了。希望它有所帮助。

JQuery / Javascript：函数不在document.ready中调用

2 个答案: