javascript - JQuery/Javascript : Function not calling within document. 就绪

Question

我想要做的是有一个 slider ，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() 的调用永远不会被执行。

Answer 1

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