Question

我发现this simple slider有一个进度条。它工作正常，但我想添加next，previous和pause按钮。有人可以帮忙吗？

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示例，它解决了暂停和继续功能，我认为这是更具挑战性的部分。对于下一个，您只需要一个click事件来执行原始示例中的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滑块

1 个答案: