如何在滑块中添加数字控制器

时间:2013-03-14 06:59:19

标签: jquery jquery-ui

让某人知道如何在此 jquery div滑块中添加数字控件,我设置小提琴here

任何建议和想法都表示赞赏。提前谢谢......

var totalSlides = 0;
var currentSlide = 1;
var contentSlides = "";

$(document).ready(function(){
  $("#slideshow-previous").click(showPreviousSlide);
  $("#slideshow-next").click(showNextSlide);

  var totalWidth = 0;
  contentSlides = $(".slideshow-content");
  contentSlides.each(function(i){
    totalWidth += this.clientWidth;
    totalSlides++;
  });
  $("#slideshow-holder").width(totalWidth);
  $("#slideshow-scroller").attr({scrollLeft: 0});
  updateButtons();
});

function showPreviousSlide()
{
  currentSlide--;
  updateContentHolder();
  updateButtons();
}

function showNextSlide()
{
  currentSlide++;
  updateContentHolder();
  updateButtons();
}

function updateContentHolder()
{
  var scrollAmount = 0;
  contentSlides.each(function(i){
    if(currentSlide - 1 > i) {
      scrollAmount += this.clientWidth;
    }
  });
  $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);
}

function updateButtons()
{
  if(currentSlide < totalSlides) {
    $("#slideshow-next").show();
  } else {
    $("#slideshow-next").hide();
  }
  if(currentSlide > 1) {
    $("#slideshow-previous").show();
  } else {
    $("#slideshow-previous").hide();
  }
}

1 个答案:

答案 0 :(得分:0)

请查看此How to combine a numeric selector with a jQuery Slider?链接。 这将帮助您在jquery滑块中添加数字控件。

        $('.control').click(function () {
            currentSlide = $(this).val();
            updateContentHolder();
            updateButtons();
            updateNumericSelector();
        });

我希望这会对你有所帮助。