Cuộn ngang jQuery (nhấp và tạo ảnh động)

Question

Tôi có một chuỗi các div đang trôi nổi đến vô cùng theo đường ngang. Tôi có một chiều rộng cố định div chứa chúng, tràn: ẩn. Cuối cùng, tôi muốn nhấn div/nút ở bên trái và bên phải để cuộn qua các mục (so với sử dụng thanh cuộn).

Tôi gặp sự cố khi tải .animate() để hoạt động. Tôi muốn mỗi lần nhấp để di chuyển các mục trong danh sách.

Nó sẽ hoạt động tương tự như danh sách "Khách hàng đã mua mặt hàng này cũng được mua" của Amazon mà bạn có thể cuộn qua theo cách tương tự. Tôi đã bị cám dỗ để thử sử dụng .mousedown và có nó di chuyển trong khi giữ (tương tự như cuộn thật) nhưng muốn làm điều này dễ dàng hơn cách tiếp cận đầu tiên.

Đây là fiddle và mã:

http://jsfiddle.net/stfzy/16/

HTML:

<div id="container"> 
<div id="arrowL"> 
</div> 
<div id="arrowR"> 
</div> 
<div id="list-container"> 
    <div class='list'> 
     <div class='item'> 
     </div> 
     <div class='item'> 
     </div> 
     <div class='item'> 
     </div> 
     <div class="item"> 
     </div> 
    </div> 
</div> 

CSS:

#container{ 
width:340px; 
    height:50px; 
} 

#list-container { 
overflow:hidden;  
width: 300px; 
float:left;  
} 

.list{ 
    background:grey; 
min-width:700px; 
    float:left; 
} 


#arrowR{ 
background:yellow; 
    width:20px; 
    height:50px; 
    float:right; 
    cursor:pointer; 
} 


#arrowL{ 
background:yellow; 
    width:20px; 
    height:50px; 
    float:left; 
    cursor:pointer; 
} 

.item{ 
    background:green; 
width:140px; 
    height:40px; 
    margin:5px; 
    float:left; 
} 

jQuery

$(document).ready(function() { 

    $('div#arrowR').click(function(){ 

     $('div.item').animate({'left':'-=300px'}); 

    }); 

    $('div#arrowR').click(function(){ 

     $('div.item').animate({'left':'+=300px'}); 

    }); 

}); 

Mọi sự giúp đỡ được đánh giá cao. Cảm ơn!

Answer 1

Thêm position:relative-.item, như vậy:

.item{ 
    background:green; 
    width:140px; 
    height:40px; 
    margin:5px; 
    float:left; 
    position:relative; /* Put me here! */ 
} 

dụ làm việc: http://jsfiddle.net/mattblancarte/stfzy/21/

Có một vài lỗi hơn trong thiết lập của bạn, nhưng điều này sẽ giúp bạn lột. :)

Sửa ::

Dưới đây là một giải pháp nhanh chóng để giải quyết các lỗi mà danh sách sẽ trượt quá xa trong hai hướng:

$(document).ready(function() { 

    var $item = $('div.item'), //Cache your DOM selector 
     visible = 2, //Set the number of items that will be visible 
     index = 0, //Starting index 
     endIndex = ($item.length/visible) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...) 

    $('div#arrowR').click(function(){ 
     if(index < endIndex){ 
      index++; 
      $item.animate({'left':'-=300px'}); 
     } 
    }); 

    $('div#arrowL').click(function(){ 
     if(index > 0){ 
      index--;    
      $item.animate({'left':'+=300px'}); 
     } 
    }); 

});