tạo thanh trượt jQuery đơn giản

Question

Tôi đang cố gắng tự dạy mình javascript/jquery vì vậy tôi tự thiết lập dự án để tạo thanh trượt rất cơ bản cho trang web của mình. Sử dụng thư viện API của Codeacademy và jQuery API, tôi đã quen với mã nguồn nhưng gặp khó khăn trong việc nắm bắt cú pháp. Do đó, tôi đến đây để tìm sự giúp đỡ bằng phương tiện ai đó kiểm tra chính tả những nỗ lực của tôi.

Dưới đây là các mã:

CSS:

#wrapper { width: 500px; height:300px; display: block; overflow: hidden; } 
#slider {width: 1500px; clear: both; margin-left:0;} 
.content {float: left; width: 500px; height: 300px; display: block; background:grey;} 

HTML:

<div id="wrapper"> 
    <div id="slider"> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
    </div> 
</div> 

<button id="left">left</button> 
<button id="right">right</button> 

và cuối cùng là:

$#left.click(function { 
if ($('#slider').css('margin-left').between(0,-1500)) { 
    $('#slider').animate({ 
     margin-left : "+=500" 
    }, 500); 
}); 

} 
} 

mà dịch để di chuyển div 1500px rộng chứa ima ges trái 500px khi một nút được nhấp. Thanh trượt nằm trong div chứa có chiều rộng 500px và tràn ẩn. Các câu lệnh if là để đảm bảo div không tiếp tục đi du lịch trái sau khi nó đã đạt đến kết thúc của div chứa

Tôi hoàn toàn biết ơn cho bất cứ ai có thể giúp với yêu cầu chứ không phải ích kỷ này

Answer 1

Đây là của bạn mã js có lỗi cú pháp như đã nêu ở trên cũng như một số lỗi khác đang ngăn mã của bạn chạy đúng cách.

$('#left').click(function(){ 
    if ($('#slider').css('margin-left') <= '0px' && $('#slider').css('margin-left') >= '-1500px') {  
    $('#slider').animate({ 
      "margin-left" : "+=500" 
     }, 500); 
    }; 
}); 

Lưu ý: Tôi đã xóa hàm .between() khỏi mã của bạn vì tôi không thể tìm thấy bất kỳ tài liệu nào ở đây. Nếu bạn có tham chiếu đến chức năng này tôi rất thích nhìn thấy nó. Bây giờ, tôi đã thay thế nó bằng một so sánh giá trị đơn giản.

Đây là một jsfiddle với làm việc mã của bạn:. http://jsfiddle.net/ghCX6/2/