2012-07-08 2 views
1

다음 및 이전 버튼을 사용하여 간단한 이미지 슬라이더를 코딩하려고합니다. 그러나 특히 첫 번째 이미지와 이전 버튼을 클릭 할 때 목록을 반복하는 데 문제가 있습니다. 그러면 슬라이더에 마지막 이미지가 표시됩니다. 어쩌면 누군가가 ... 나에게 힌트를 줄 수.next() 및 .prev()가 작동하지 않는 jquery 이미지 슬라이더

내 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! 
} 
} 

어떤 아이디어라도 감사하겠습니다! 감사합니다. 내가 생각

답변

1

, 당신이 필요합니다

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

Live demo

+0

감사합니다! 내 하루를 만들어 ... – Nico

관련 문제