Question

任何人都可以建议我，如果我可以将Jquery横幅和UI-Slider小部件组合在一起，以创建像这个网站上的横幅？ - http://corporate.arcelormittal.com/

Answer 1

你可以用CSS3做得更好。您也可以使用UI-Slider进行操作。答案是实时改变价值。

jQuery 示例

$(function(){
  var slider = $(".slider").slider();
  $(".event-listener1").click(function(){
    slider.slider("value", 0);
    /* Slide to first image */
  });
  $(".event-listener2").click(function(){
    slider.slider("value", 20);    
    /* Slide to second image */
  });
  $(".event-listener3").click(function(){
    slider.slider("value", 40);
    /* Slide to ... */
  });
  $(".event-listener4").click(function(){
    slider.slider("value", 60);    
  });
  $(".event-listener5").click(function(){
    slider.slider("value", 80);    
  });
  $(".event-listener6").click(function(){
    slider.slider("value", 100);    
  });
});

HTML预览

<div>
  <div class="slider"></div>
  <a href="javascript:void(0);" class="event-listener1">
    Change value to 0
  </a><br />
  <a href="javascript:void(0);" class="event-listener2">
    Change value to 20
  </a><br />
  <a href="javascript:void(0);" class="event-listener3">
    Change value to 40
  </a><br />
  <a href="javascript:void(0);" class="event-listener4">
    Change value to 60
  </a><br />
  <a href="javascript:void(0);" class="event-listener5">
    Change value to 80
  </a><br />
  <a href="javascript:void(0);" class="event-listener6">
    Change value to 100
  </a>

</div>

Jquery滑块/横幅与UI-Slider缩略图的组合

1 个答案: