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 ウィジェットの 1 つです。横スクロールの jQuery UI スライダーのデモが、質問にリンクされているデモ ページと最もよく一致しているようです。

jQuery UI で古いデモ ページを模倣できるかどうか試してみて、このデモを思いつきました。それがあなたが求めているものかどうかはわかりません。

于 2011-04-03T21:05:52.310 に答える