1

次と前のボタンを備えた単純な画像スライダーをコーディングしようとしています。しかし、特に最初の画像で前のボタンをクリックすると、リストを繰り返し処理する際に問題が発生します。スライダーには最後の画像が表示されます。多分誰かが私にヒントを与えることができます...

私のHTML：

<div id="slideshow"> 
<img src="img/slide11.jpeg"  alt="" class="active">
<img src="img/slide31.png" alt="">
<img src="img/slide21.png"  alt="">
</div>

クリックハンドラ:

$(document).ready(function () {
 $('#next').bind('click', function() {
    slideSwitchP('next');
});

 $('#prev').bind('click', function() {
    slideSwitchP('prev');
});
});
}

そして、これまでのjQueryコード（動作していません）

function slideSwitchP($control) {
var $active = $('#slideshow IMG.active');

var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
var $prev = $next.prev().length ? $active.prev() : $('#slideshow IMG:last');

console.log('next', $next);
console.log('prev', $prev);

$active.addClass('last-active');

if($control === 'next'){ 
console.log($control);
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
if($control === 'prev'){ 
console.log($control);
//prev not working!
}
}

どんなアイデアでも大歓迎です！ありがとう！

4

1 に答える 1

1

私はあなたがこれを必要とすると思います：

var $prev = $active.prev().....
           //  ^---------instead of `$next`

ライブデモ

于 2012-07-08T14:01:19.047 に答える