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

コンソールでエラーが発生しない場合は、JavaScriptスコープの問題だと思います。匿名関数の関数内でslideright（）およびsildeleft（）関数を呼び出しているため、これらの関数はグローバルスコープ内の無名関数の外部で定義されています。

クラスとしての無名関数と、クラス関数内の関数を呼び出していると考えてください。これらの関数は、そのクラススコープに属していません。

解決策（コードを確認していません。動作するはずです）：

  1. これらの関数を無名関数$（function（）または

  2. それらの関数をコンストラクター関数またはオブジェクトでラップします

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

    }//このように呼び出しますvarslider= new Slide（）; slide.slideRight//slideRightの場合slider.slideLeft//slideLeftの場合

于 2013-03-22T15:35:27.027 に答える
0

定義された関数の呼び出しが問題だったので、コードを貼り付けて一部の行を簡略化したこのJSBinを確認してください。コンソールで
、実際には関数がsetIntervalから呼び出されていることがわかります。また、JSBinデモで宣言されている方法のように、スコープ内で関数を定義する方がよいことをここで指摘したいと思います。なんで？スコープ外でそれらを定義すると、グローバルスコープでは、非常に悪い人がコンソールslideright = function () { evilXSShere; }で実行して失敗する可能性があり、関数が上書きされます。それが役に立てば幸い。

于 2013-03-22T17:54:20.467 に答える