jQuery 滑块 - 进度条 [英] jQuery Slider - Progress Bar
本文介绍了jQuery 滑块 - 进度条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
类似于:带进度条的 Jquery 滑块
我有这个滑块和进度条,但我希望进度条与上一个"和下一个"按钮同步.因此,当您单击下一步"时,进度条将从头开始.
I have this slider and progress bar, but I want the progress bar synced with with the "previous" and "next" buttons as well. So when you click "next" the progress bar starts from beginning.
http://jsfiddle.net/aidenguinnip/8rJws/
$(window).load(function(){
var currentIndex = 0;// store current pane index displayed
var ePanes = $('#slider .panel'), // store panes collection
time = 3000,
bar = $('.progress_bar');
function showPane(index){// generic showPane
// hide current pane
ePanes.eq(currentIndex).stop(true, true).fadeOut();
// set current index : check in panes collection length
currentIndex = index;
if(currentIndex < 0) currentIndex = ePanes.length-1;
else if(currentIndex >= ePanes.length) currentIndex = 0;
// display pane
ePanes.eq(currentIndex).stop(true, true).fadeIn();
// menu selection
$('.nav li').removeClass('current').eq(currentIndex).addClass('current');
}
// bind ul links
$('.nav li').click(function(ev){showPane($(this).index());});
// bind previous & next links
$('.previous').click(function(){showPane(currentIndex-1);});
$('.next').click(function(){showPane(currentIndex+1);});
// apply start pane
showPane(0);
function run(){
bar.width(0);
showPane(currentIndex+1);
bar.animate({'width': "+=400"}, time, run);
}
run();
});
推荐答案
给你...
我在更改幻灯片时停止了动画并将条形宽度重置为 0,然后重新启动了动画(参见第 10 行)...
I stopped the animation and reset the bar width to 0 when changing slides, and then restarted the animation (see line 10)...
bar.stop(true, true).css("width", 0).animate({'width': "+=400"}, time, run);
这篇关于jQuery 滑块 - 进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文