1

我想要做的是有一个滑块，DIV 可以左右移动。代码如下所示：

<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()永远不会被执行。

4

2 回答 2

0

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

于 2013-03-22T17:54:20.467 回答
0

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

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

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

  1. 在匿名函数 $(function() 或

  2. 将这些函数包装在构造函数或对象中

    函数幻灯片（）{ this.slideRight = 函数（）{} this.slideLeft = 函数（）{}

    } //像这样调用它 var slider = new Slide(); slider.slideRight//为slideRight slider.slideLeft//为slideLeft

于 2013-03-22T15:35:27.027 回答