Thêm hoạt ảnh vào thanh trượt lời chứng thực

Question

Tôi đã tạo một thanh trượt bằng CSS3 để hiển thị lời chứng thực của mình .. Bây giờ tôi cần thêm một số hoạt ảnh vào thanh trượt này bằng Jquery. Nhưng tôi không có bất kỳ ý tưởng làm thế nào để sử dụng Jquery với thanh trượt này .. và các plugin phù hợp cho việc này là gì. Vì vậy, bất cứ ai có thể cho tôi biết Làm thế nào tôi có thể thêm một hình ảnh động để thanh trượt này?

mọi ý tưởng được đánh giá cao.

Cảm ơn bạn.

Đây là một liên kết đến mã trượt: jsfiddle.net/XJVYj/82

Answer 1

Tôi nghĩ rằng nó sẽ rất khó để tìm một Plugin khớp chính xác với mã của bạn. Nhưng tôi có thể viết cho bạn những thứ jQuery cho nó. Nhưng sau đó tôi sẽ có hai câu hỏi.

1. Tôi có thể thay đổi bao nhiêu CSS? Hay nó vẫn hoạt động nếu không kích hoạt js?
2. Bạn có đang ở với một số 3 mặt hàng trong tương lai không? Hay bạn muốn thay đổi số lượng trang trình bày động?

// EDIT

OK nó hoạt động ngay bây giờ. Tôi biết nó không phải là rất thanh lịch, nhưng tôi không muốn thay đổi quá nhiều mã của bạn. Vì vậy, tôi chỉ cần chỉnh sửa hai bộ chọn css của bạn (tôi đã nhận xét cái cũ). Bạn cũng muốn thông báo, rằng với giải pháp này phương pháp cũ của bạn vẫn hoạt động khi javascript bị vô hiệu hóa. Bộ luật jQuery sau ...

$("div.one").css({"left":0, "opacity":1}); 
$("div.two").css({"left":300, "opacity":1}); 
$("div.three").css({"left":600, "opacity":1}); 

$("input#first").click(function(){ 
    $("div.one").animate({left:0},600); 
    $("div.two").animate({left:300},600); 
    $("div.three").animate({left:600},600); 
}); 

$("input#second").click(function(){ 
    $("div.one").animate({left:-300},600); 
    $("div.two").animate({left:0},600); 
    $("div.three").animate({left:300},600); 
}); 

$("input#third").click(function(){ 
    $("div.one").animate({left:-600},600); 
    $("div.two").animate({left:-300},600); 
    $("div.three").animate({left:0},600); 
});​ 

jsfiddle.net/mYhEV/2/

Hy vọng nó giúp.

PS: Để có giải pháp sạch hơn, bạn sẽ phải suy nghĩ lại một chút. Một phương pháp sẽ được đặt tất cả các thanh trượt trong một wrapper và chỉ di chuyển wrapper này thay vì di chuyển.

Answer 2

Hãy thử dùng những:

1. Flex Slider
2. Timelinr
3. SmartGallery
4. Skitter

Answer 3

Có tài liệu đúng nghĩa đen trong file kịch bản trong đó có tùy chọn bạn có thể sử dụng:

$.tiny.carousel = { 
     options: { 
      start: 1, // where should the carousel start? 
      display: 1, // how many blocks do you want to move at 1 time? 
      axis: 'x', // vertical or horizontal scroller? (x || y). 
      controls: true, // show left and right navigation buttons. 
      pager: false, // is there a page number navigation present? 
      interval: false, // move to another block on intervals. 
      intervaltime: 3000, // interval time in milliseconds. 
      rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached. 
      animation: true, // false is instant, true is animate. 
      duration: 1000, // how fast must the animation move in ms? 
      callback: null // function that executes after every move. 
     } 
    }; 

Secifcally: animation: true, // false is instant, true is animate.

Hãy thử thiết lập các hình ảnh động là true khi bạn gọi thanh trượt trên yếu tố của bạn (mà bạn cung cấp không có mã kịch bản nên tôi không thể chỉnh sửa nó cho bạn.)

$('YOUR_SLIDERr').tinycarousel({ animation: true });​