jquery - 带有 UI-Slider 缩略图组合的 Jquery Slider/Banner

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>