Liên tục cuộn mã ngang có chứa hình ảnh trong jQuery?

Question

Tôi muốn làm một cái gì đó như thế này: http://javascript.about.com/library/blcmarquee1.htm

Kịch bản tôi tham chiếu tuy nhiên có vẻ hơi chậm trễ (lỗi thời), vì vậy tôi đã tự hỏi liệu có ai biết giải pháp tốt hơn không. (. Giải pháp jQuery chào đón)

Answer 1

Chỉ cần thấy điều này - jQuery-driven, và có hình ảnh. Tôi dự định sẽ sử dụng nó cho một dự án hiện tại.

http://logicbox.net/jquery/simplyscroll/

CẬP NHẬT: Tôi hiện đã sử dụng mã này trong mã sản xuất. Các plugin có khả năng looping 70 + 150 × 65px hình ảnh khá trơn tru - mà một số plugin khác tôi đã cố gắng tương tự như điều này đã thất bại trên.

LƯU Ý nó hăm hở với z-index sự cố trong IE 6/7 và không hiển thị vv - Nhưng điều này cũng có thể một phần do CSS của tôi. Cho bất cứ ai gặp rắc rối với nó không hiển thị ở tất cả trong IE kiểm tra tiêu chuẩn IE z-index sửa: http://www.google.com/search?q=ie+z+index+issues

CẬP NHẬT MỚI NHẤT: Addition điều cần xem xét khi thực hiện các plug-in như thế này:

• Số các mục và loại nội dung để cuộn. Tôi đã tìm thấy một số sẽ bắt đầu bị trục trặc ngay khi bạn có nhiều hơn 15 hình ảnh để cuộn.
• Tôi đã tìm thấy một số plugin được gắn với các phiên bản cũ của jquery
• Nếu cuộn hình ảnh LÀ TẤT CẢ CÁC KÍCH THƯỚC KÍCH THƯỚC một số plug-in tôi đã thử nghiệm chỉ làm việc nếu tất cả các hình ảnh đều giống nhau kích thước nhưng không làm rõ điều này trong hướng dẫn. Tôi tin rằng sau đó các plugin chạy sau đó thiết lập một chuỗi các thẻ li được tất cả x rộng sau đó tính toán tổng khoảng cách của tất cả chúng xích lại với nhau để quản lý di chuyển.
• Hiệu ứng - một số sẽ tiếp tục di chuyển những người khác sẽ di chuyển một hình ảnh tạm dừng trong vài giây sau đó chuyển sang một hình ảnh

Tôi đã bây giờ cũng tìm thấy hai plugin scroller là rất tốt là tốt.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

The Silky-Smooth jQuery Marquee và Giva Labs' Marquee

Answer 3

Chỉ cần một ý nghĩ. Bạn có thể làm một cái gì đó như thế này.

<style type="text/css"> 

.imgwindow{ 
width:500px; //or whatever 
height:65px; //or whatever 
position:relative; 
overflow:hidden; 
} 

.imgholder{ 
min-width:2000px; 
height:65px; 
position:absolute; 
left:-200px; 
} 

.inline-image{ 
display:inline-block; 
} 

</style> 

<script type="text/javascript"> 

var img; 

function imgScroll(){ 
img = $(".inline-image").first(); 
img.animate({width:0},2500,'linear',function(){ 
    img.remove(); 
    $(".imgholder").append(img); 
    imgScroll(); 
}); 

} 

$(document).ready(function(){ 

imgScroll(); 

}); 

</script> 

và html

<div class="imgwindow"> 
    <div class="imgholder"> 
    <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />... 
    </div> 
</div>