div cuộn ngang bằng cách sử dụng các nút

Question

Làm cách nào để đặt các nút trái và phải trên DIV để cuộn nội dung theo chiều ngang? Tôi không cần hiển thị thanh cuộn.

HMTL:

<div id="browser"> 
    <a href="#" id="left-button"><img src="left-button.jpg" /></a> 
    <img src="thumb_1.jpg" /> 
    <img src="thumb_2.jpg" /> 
    <img src="thumb_3.jpg" /> 
    <img src="thumb_4.jpg" /> 
    <img src="thumb_5.jpg" /> 
    <img src="thumb_6.jpg" /> 
    <a href="#" id="right-button"><img src="right-button.jpg" /></a> 
</div> 

CSS:

#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; } 

Answer 1

Đỗ:

<div id="browser"> 
    <a href="#" id="left-button"><img src="left-button.jpg" /></a> 
    <div id="content"> 
     <img src="thumb_1.jpg" /> 
     <img src="thumb_2.jpg" /> 
     <img src="thumb_3.jpg" /> 
     <img src="thumb_4.jpg" /> 
     <img src="thumb_5.jpg" /> 
     <img src="thumb_6.jpg" /> 
    </div> 
    <a href="#" id="right-button"><img src="right-button.jpg" /></a> 
</div> 

<script> 
    $('#right-button').click(function() { 
     event.preventDefault(); 
     $('#content').animate({ 
     marginLeft: "-=200px" 
     }, "fast"); 
    }); 
</script> 

Sau đó, tương tự cho các nút trái, trừ - marginLeft: + = "200px".

Answer 2

bạn có thể thử điều này: - tạo "mặt nạ div" và đặt vị trí tương đối, đặt độ rộng và mức độ ẩn bị ẩn. - làm cho một div nội dung bên trong mặt nạ div và thiết lập vị trí sửa chữa

Bây giờ bạn có thể đặt hai nút: trái và phải, và bạn cần phải modifiy chỉ có giá trị trái div nội dung của

tương tự như giải pháp Patches :)

Answer 3

Đây là mã mà bạn muốn. Nó được chứng minh là hoạt động trên IE, Safari, Chrome, Firefox, v.v.

Đây là phần HTML.

<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;"> 
     <div id="inner-wrap" style="float:left;"> 
      <!-- 'Put Inline contains here like below.' --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- ... --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- 'Put Inline contains here like above.' --> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px"> 
      <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px"> 
      <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/> 
     </div> 
    </div> 

Đây là phần jQuery trong hàm JavaScript.

 function scrollThumb(direction) { 
     if (direction=='Go_L') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "-=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     }else 
     if (direction=='Go_R') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "+=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     } 
     } 

Để ẩn các mũi tên, vui lòng xem tại đây. Detect end of horizontal scrolling div with jQuery