将暂停、下一个和上一个按钮添加到带有进度条的 jquery 滑块

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

将暂停、下一个和上一个按钮添加到带有进度条的 jquery 滑块

Adding pause, next and previous buttons to jquery slider with progress bar

jquery

slider