Jquery的滑塊與進度條

Question

我已經安裝和jsfiddler： http://jsfiddle.net/semantic/6SaJK/2/

我需要的滑動是在自動旋轉，並且對於每個滑動進度條需要填寫從0到50像素寬度。其餘的實施我還有其餘的部分，但與其他的邏輯進行鬥爭。請注意，我想使用現有的代碼。謝謝你的時間。

Answer 1

您可以嘗試使用這樣的：http://jsfiddle.net/6SaJK/28/

Answer 2

我無法評論，因爲我缺乏對計算器的聲譽，所以我的想法放在這裏。

OP，請記住，當您將暫停滑塊和進度條時，您可以在時間上稍有不同。當進度條完成他的工作時，每個需要動畫進度條的滑塊的錯誤驗證答案會觸發滑塊的「下一個」事件。

使用jQuery週期2你可以像這樣實現它：

function main_slider() { 

    if ($("#slider").length) { 

    var $time = 7000; 
    var $speed = 500; 
    var $slide_width = $("#slider").width() 

    $("#slider .cycle").on("cycle-initialized", function(event, opts) { 
     var $slider = $("#slider"); 
     var $progress = $("#slider .progress"); 
     var $animator = $("#slider .progress .animator"); 
     var propWidth = $animator.width()/$progress.width() * 100; 

     $animator.animate({ 
     width: "100%" 
     }, $time * (100 - propWidth)/100, function(){ 
     $("#slider .cycle").cycle("next"); 
     }); 

    });  

    $("#slider .cycle").cycle({ 
     fx: "scrollHorz", 
     timeout: 0, 
     speed: $speed, 
     slides: "li", 
     next: "#slider nav .next", 
     prev: "#slider nav .prev", 
     pauseOnHover: true, 
     sync: true, 
     delay: 0, 
     hideNonActive: false, 
     pager: "#slider .pager ul", 
     pagerTemplate: "<li><a href='#'></a></li>" 

    }); 


    $("#slider .cycle").on("cycle-before", function(event, opts) { 
     $("#slider .progress .animator").stop(true).animate({"width": 0}, 0); 
     var $slider = $("#slider"); 
     var $progress = $("#slider .progress"); 
     var $animator = $("#slider .progress .animator"); 

     $animator.animate({ 
     width: "100%" 
     }, $time, function(){ 
     $("#slider .cycle").cycle("next"); //everything is a trick :) 
     }); 
    }) 

    $("#slider .cycle").on("cycle-paused", function(event, opts) { 
     var $slider = $("#slider"); 
     var $progress = $("#slider .progress"); 
     var $animator = $("#slider .progress .animator"); 

     $animator.stop(true); 
    }) 

    $("#slider .cycle").on("cycle-resumed", function(event, opts) { 
     var $slider = $("#slider"); 
     var $progress = $("#slider .progress"); 
     var $animator = $("#slider .progress .animator"); 

     var propWidth = ($animator.width()/$progress.width()) * 100; 

     $animator.animate({ 
     width: "100%" 
     }, $time * ((100 - propWidth)/100), function(){ 
     $("#slider .cycle").cycle("next"); 
     }); 

    }); 

    $("#slider .cycle").on("cycle-next", function(event, opts){ 
     var $slider = $("#slider"); 
     var $progress = $("#slider .progress"); 
     var $animator = $("#slider .progress .animator"); 
     $animator.stop(true).width(0); 

     $animator.animate({ 
     width: "100%" 
     }, $time, function(){ 
     $("#slider .cycle").cycle("next"); 
     }); 
    }).on("cycle-prev", function(event, opts){ 
     var $slider = $("#slider"); 
     var $progress = $("#slider .progress"); 
     var $animator = $("#slider .progress .animator"); 
     $animator.stop(true).width(0); 

     $animator.animate({ 
     width: "100%" 
     }, $time, function(){ 
     $("#slider .cycle").cycle("next"); 
     }); 
    }) 

    $("#slider").mouseenter(function(){ 
     var $prev = $("#slider nav .prev"); 
     var $next = $("#slider nav .next"); 
     var $duration = 500 

     $prev.stop().animate({ 
     opacity: 1, 
     left: 0 
     }, $duration) 

     $next.stop().animate({ 
     opacity: 1, 
     right: 0 
     }, $duration) 

    }).mouseleave(function(){ 
     var $prev = $("#slider nav .prev"); 
     var $next = $("#slider nav .next"); 
     var $duration = 500 
     $prev.stop().animate({ 
     opacity: 0, 
     left: "-46px" 
     }, $duration) 
     $next.stop().animate({ 
     opacity: 0, 
     right: "-46px" 
     }, $duration) 
    }) 

    function position_controls() { 
     var $prev = $("#slider nav .prev"); 
     var $next = $("#slider nav .next"); 
     var $slider = $("#slider li"); 

     var $sliderH = $slider.height(); 
     var $controlH = $prev.height(); 

     var $center = ($sliderH/2) - ($controlH/2); 

     $prev.css("top", $center+"px"); 
     $next.css("top", $center+"px"); 

    } 

    position_controls(); 

    $(window).resize(function(){ 
     position_controls(); 
    }) 

    } 

} 

main_slider(); 

和HTML結構爲：

<section id="slider"> 
    <nav><a href="#" class="next"></a><a href="#" class="prev"></a></nav> 
    <ul class="cycle"> 
    <li><a href="#"><img src="images/slide1.jpg" /></a></li> 
    <li><a href="#"><img src="images/slide2.jpg" /></a></li> 
    <li><a href="#"><img src="images/slide1.jpg" /></a></li> 
    <li><a href="#"><img src="images/slide2.jpg" /></a></li> 
    </ul> 
    <div class="progress"><div class="animator"></div></div> 
    <div class="pager"><ul></ul></div> 
</section> 

jQuery的部分是有點亂了，因爲這是一個開發版本，我剛剛完成，因此它沒有優化，有太多的變量聲明，但它做它需要做的，並沒有任何問題與時間。