jquery - 向带进度条的 jquery slider 添加暂停、下一个和上一个按钮

Question

我找到了this simple slider带进度条。它工作正常，但我想添加下一个、上一个和暂停按钮。有人可以帮忙吗？

JS

bar = $('.progress_bar');
time = 3000;

function run(){
    bar.width(0);
    bar.fadeIn(500,function(){
        bar.animate({'width': "100%"}, time).fadeOut(500,function(){
            change();run();
        });
    });
}
$("#slideshow > li:gt(0)").hide();


var change = function() { 
  $('#slideshow > li:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
};

run();

Answer 1

我制作了一个 codepen.io 示例，它解决了暂停和继续功能，我认为这是更具挑战性的部分。接下来，您只需有一个单击事件，该事件将执行原始示例中的change() 函数: http://codepen.io/KAPastor/pen/ezdQPd

<button id="run">RUN</button>  
<button id="pause">PAUSE</button>  
<button id="continue">CONTINUE</button>  

<div class="progress_bar"></div> 

CSS

div.progress_bar {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #6cecc6;
    height: 5px;
    width: 0;
    opacity: 1;
    z-index: 1002;
    width: 100%;
     }

JS:

$(document).ready(function(){

  $('#run').click(function(){
    $('.progress_bar').width(0);
    $('.progress_bar').fadeIn(500,function(){
        $('.progress_bar').animate({'width': "100%"},    3000)
  });
  });

    $('#pause').click(function(){
      $('.progress_bar').clearQueue();
    $('.progress_bar').stop();

  });

  $('#continue').click(function(){
$('.progress_bar').fadeIn(500,function(){
        $('.progress_bar').animate({'width': "100%"},    3000)
     });
  });



})

我知道这是一个简化的解决方案，但我认为它会有帮助! 如果您还有疑问，请告诉我。 -K