Question

请查看 slider (fiddle) 。是否可以让下一个/上一个按钮与选择框一起使用，允许我通过匹配幻灯片的类和选项值跳转到特定幻灯片？如果条件为$('#left, #right').click(function(){？

，可能先通过另一张幻灯片的标题类

HTML：

<div id="event_rotator">
 <div id="searchslider">

     <div class="eventslide title1 softblue">
     <h3 class="whitetitle">Title1</h3>
     <div class="slidebackground">
     <p>gfhhhhhhhh</p>
     </div>
     </div>
     <div class="eventslide title2 softblue">
     <h3 class="whitetitle">Title2</h3>
     <div class="slidebackground">
     <p>Text3</p>
     </div></div>
   ..........................
  </div>      
</div>

<button id="left">left</button>
<button id="right">right</button>

<select class="select_title">
 <option value="title1">Select</option>
 <option value="title1">Title_1</option>
 <option value="title2">Title_2</option>
 <option value="title3">Title_3</option>
 <option value="title4">Title_4</option>
</select>

JS脚本：

$('.select_title').change(function(){
    var selected = $(this).find(':selected');
    $('.eventslide').hide();
   $('.'+selected.val()).show(); 
});
var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }

  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

Answer 1

这应该是你的改变功能

$('.select_title').change(function(){
  var selIndex = $(this).prop("selectedIndex");
  if (selIndex == 0) return false;
  C = selIndex - 1;
  $('#searchslider').stop().animate({left: -C*W }, 500 ); 
});

<强> UPDATED FIDDLE

下一个上一个按钮和下拉框在内容滑块中一起工作

1 个答案: