jQuery Carousel. Làm thế nào để hiển thị phần tử kế tiếp hoặc trước chỉ

Question

Tôi có vấn đề về jQuery và tôi đã thực sự thử mọi thứ tôi biết (tôi rất mới ở đây) vì vậy ..

Vấn đề trong ngắn hạn là tôi đang thực hiện hiệu ứng giống như băng chuyền đơn giản. Tôi đang sử dụng mã này.

(The div .showarea là DIV mà cần phải được luân chuyển (tiếp theo/trước) nhưng tôi muốn giữ lại chỉ có một div hiển thị ở một thời điểm.)

Đây là đánh dấu html.

<div class="maincarousel"> 
     <div class="showarea"><a href="#"><img src="img/sampleshow.png" alt="" title="" /></a></div> 
     <div class="showarea"><a href="#"><img src="img/sampleshow2.png" alt="" title="" /></a></div> 
     <div class="showarea"><a href="#"><img src="img/sampleshow3.png" alt="" title="" /></a></div> 
     <a href="#carouselPrev" class="leftarrow" title="Previous"></a> 
     <a href="#carouselNext" class="rightarrow" title="Next"></a> 
    </div> 

Đây là nỗ lực của tôi jquery

$('.showarea').hide(); 
$('.showarea:first').fadeIn(500); 

$('.maincarousel a').click(function() { 

    if ($(this).attr('href') == '#carouselNext') { 
     $('.showarea').hide(); 
     $('.showarea').next('.showarea').fadeIn(500); 
    } 

    if ($(this).attr('href') == '#carouselPrev') { 
     $('.showarea').hide(); 
     $('.showarea').prev('.showarea').fadeIn(500); 
    } 

}); 

Thật không may, bên cạnh() và trước() sẽ không chỉ hiển thị các phần tử tiếp theo, nhưng tất cả các yếu tố tiếp theo và điều tương tự cho trước(). Bất kỳ workaround nhanh chóng ..

Ai đó có thể giúp tôi về vấn đề này,

Cảm ơn

Answer 1

dưới đây sẽ luân phiên vì vậy nếu bạn đang ở mục đầu tiên nhấn trở lại sau đó sẽ hiển thị mục cuối cùng ...

Demo here

$('div.showarea').fadeOut(0); 
$('div.showarea:first').fadeIn(500); 

$('a.leftarrow, a.rightarrow').click(function (ev) { 
    //prevent browser jumping to top 
    ev.preventDefault(); 

    //get current visible item 
    var $visibleItem = $('div.showarea:visible'); 

    //get total item count 
    var total = $('div.showarea').length; 

    //get index of current visible item 
    var index = $visibleItem.prevAll().length; 

    //if we click next increment current index, else decrease index 
    $(this).attr('href') === '#carouselNext' ? index++ : index--; 

    //if we are now past the beginning or end show the last or first item 
    if (index === -1){ 
     index = total-1; 
    } 
    if (index === total){ 
     index = 0 
    } 

    //hide current show item 
    $visibleItem.hide(); 

    //fade in the relevant item 
    $('div.showarea:eq(' + index + ')').fadeIn(500); 

}); 

Answer 2

Bạn có thể thử sử dụng .eq(0) để chọn phần tử đầu tiên trong bộ sưu tập trao cho bạn bởi .prev() và .next ().

Lưu ý rằng .next() và .prev(), giống như hầu hết các phương pháp jQuery, đang hoạt động trên bộ sưu tập. Vì vậy, nếu bộ chọn của bạn '.showarea' đang chọn nhiều phần tử, thì .next() sẽ chọn phần tử anh chị em tiếp theo cho mỗi phần tử được chọn bởi '.showarea' và tương tự cho .prev().

---

if ($(this).attr('href') == '#carouselNext') { 
    $('.showarea').hide(); 
    var el = $('.showarea').next('.showarea').eq(0); 
    if (el.length) { 
     el.fadeIn(500); 
    } 

} 

if ($(this).attr('href') == '#carouselPrev') { 
    $('.showarea').hide(); 
    var el = $('.showarea').prev('.showarea').eq(0); 
    if (el.length) { 
     el.fadeIn(500); 
    } 
}