スライダーで画像srcを変更するにはどうすればよいですか？

Question

私はこの画像をスライダに持っています。ボタンをクリックした後に次の画像にフェードアウトします。 JQueryは、イメージがフェードインまたはフェードアウトされるようにして、srcが変更されたときにトランジションをよりきれいにします。ただし、画像はフェーディング後も同じままです。

Htmlの

<button onclick = "prev()" id = "prev">Prev</button> 
    <img id = "slider" src = "" height = "600px" width = "600px"/> 
    <button onclick = "next()" id = "next">Next</button> 

jQueryの

var images = ['', '', '']; 
    var num = 0; 

    function next() { 
     var slider = $('#slider'); 
     num++; 
     if(num >= images.length) { 
      num = 0; 
     } 
     slider.fadeOut('slow', function() { 
      slider.src = images[num]; 
      slider.fadeIn('slow'); 
     }); 
    } 

    function prev() { 
     var slider = $('#slider'); 
     num--; 
     if(num < 0) { 
      num = images.length-1; 
     } 
     slider.fadeOut('slow', function() { 
      slider.src = images[num]; 
      slider.fadeIn('slow'); 
     }); 
    } 

私は彼らのリンクが長すぎたようでそれをテストした画像を取り出しています。 3つのスライダ画像は、JQueryの「画像」変数にあり、開始点は画像srcにあります。

Answer 1

imagesが画像URLの配列であるとすると、間違ってslider.attr('src, value);の代わりにslider.srcを設定しようとしています。

ので、代わりにこれを使用する：

slider.attr('src', images[num]);