Question

我正在尝试构建一个导航滑块，但我不知所措。我真正需要的是一个在特定点停留的滑块，并根据它停止的点显示隐藏的项目。

我在this fiddle中建立了一个非常简单的例子。

<div id="slider-wrapper">
  <ul>
    <li class="first">Slide 1</li>
    <li class="second">Slide 2</li>
    <li class="third">Slide 3</li>
  </ul>
</div> 
<div id="slider-nav">
  <ul>
    <li>Nav 1</li>
    <li>Nav 2</li>
    <li>Nav 3</li>
  </ul>
  <div id="slider"></div>
</div>

所以需要发生的是第一个＆＃34; Slide＆＃34;默认情况下会显示，但是当您滑动条形图时它会到达＆＃34;导航2＆＃34;在上面的栏上（所以基本上每100px都没问题）比＃34; Slide 1＆＃34;将被隐藏并且＆＃34;幻灯片2＆＃34;会出现。此功能也需要反向工作。

我还没能找到任何真正起作用的东西。任何建议将不胜感激。

Answer 1

检查我的测试。 https://jsfiddle.net/Cuchu/qvotoqkb/3/ 您需要在幻灯片栏中定义值的宽度和范围。但这是一种解决方法。

html（你需要包括jquery，jqueryui和jqueryuicss）

<div id="slider-wrapper">
  <ul>
    <li id="slide1" class="first">Slide 1</li>
    <li id="slide2">Slide 2</li>
    <li id="slide3">Slide 3</li>
  </ul>
</div> 
<div id="slider-nav">
  <ul>
    <li>Nav 1</li>
    <li>Nav 2</li>
    <li>Nav 3</li>
  </ul>
  <div id="slider"></div>
</div> 
<form id="reservation">
  <label style="display:none"for="minbeds">Minimum number of beds</label>
  <select name="minbeds" id="minbeds" style="display:none">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
  </select>
</form>

的javascript

$(function() {
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 7,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        $("#slider-wrapper ul li").hide();
        $("#slide"+ui.value).show();
        console.log(ui.value);
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });

和css

#slider-wrapper ul li {display:none;}
#slider-wrapper ul li.first {display:block;}

#slider-nav {margin:25px auto; text-align:left;}
#slider-nav ul {padding:0; margin:0; height:0; border-bottom:5px solid #000;}
#slider-nav ul li {display:inline-block; background:red; padding:5px; color:#fff; margin:0 15px 0 0; width:80px; text-align:center;}

#slider {margin:50px 0 0 10px;}

Answer 2

您可以将更改事件侦听器连接到滑块。然后根据值，您可以使用switch语句来显示/隐藏正确的部分。

示例：

$("#slider").slider({
  value: 1,
  min: 1,
  max: 3,
  step: 1,
  change: function(event, ui) {
      switch(ui.value) {
          case 1:
              // do something
              break;
          case 2:
              // do something different
              break;
          default:
              // do something else
      }
  }
});

jQuery UI Slider - 在某些点停止并显示隐藏的项目

2 个答案: