0

我有一个包含多个滑块的页面（来自http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div）并且由于它们中的每一个都是不同的 div 我只是复制了代码和将其更改为独特的类，从而带来以下代码：

    $(document).ready(function(){
  $(".slider1").slider({
    animate: true,
    handle: ".handle1",
    change: handleSliderChange1,
    slide: handleSliderSlide1
  });

  $(".slider2").slider({
    animate: true,
    handle: ".handle2",
    change: handleSliderChange2,
    slide: handleSliderSlide2
  });

  $(".slider3").slider({
    animate: true,
    handle: ".handle3",
    change: handleSliderChange3,
    slide: handleSliderSlide3
  });

});

function handleSliderChange1(e, ui)
{
  var maxScroll = $(".gal1").attr("scrollWidth") - $(".gal1").width();
  $(".gal1").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide1(e, ui)
{
  var maxScroll = $(".gal1").attr("scrollWidth") - $(".gal1").width();
  $(".gal1").attr({scrollLeft: ui.value * (maxScroll / 100) });
}



function handleSliderChange2(e, ui)
{
  var maxScroll = $(".gal2").attr("scrollWidth") - $(".gal2").width();
  $(".gal2").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide2(e, ui)
{
  var maxScroll = $(".gal2").attr("scrollWidth") - $(".gal2").width();
  $(".gal2").attr({scrollLeft: ui.value * (maxScroll / 100) });
}


function handleSliderChange3(e, ui)
{
  var maxScroll = $(".gal3").attr("scrollWidth") - $(".gal3").width();
  $(".gal3").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide3(e, ui)
{
  var maxScroll = $(".gal3").attr("scrollWidth") - $(".gal3").width();
  $(".gal3").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

虽然这也很好，但我有大约 7 张这样的幻灯片（上面只显示了 3 张），我对重复基本相同的代码感觉有点不好......

有没有办法简化这段代码？

4

2 回答 2

1

您可以将它包含在一个函数中并传递所有必要的变量：

function divSlider(Handle, divId) {

  this.slider({
    animate: true,
    handle: Handle,
    change: handleSliderChange(e, ui, divId);
    slide: handleSliderSlide(e, ui, divId)  });

function handleSliderChange(e, ui, divId)
{
  var maxScroll = divId.attr("scrollWidth") - divId.width();
  divId.animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui, divId)
{
  var maxScroll = divId.attr("scrollWidth") - divId.width();
  divId.attr({scrollLeft: ui.value * (maxScroll / 100) });
}

}

那么你可以通过

$('slider1').divSlider('.handle1', $('.gal1'));

我不是 100% 确定这是否有效.. 但我想它会让你朝着正确的方向前进

于 2011-04-03T13:31:37.847 回答
0

看起来滑块演示很老，滑块是 jQuery UI 小部件之一。看起来横向滚动 jQuery UI 滑块演示与您问题中链接的演示页面最匹配。

我玩了一下，看看我是否可以在 jQuery UI 中模仿旧的演示页面，然后想出了这个演示。不知道这是否是你所追求的。

于 2011-04-03T21:05:52.310 回答