javascript - 通过匹配 div 数据属性和选项值自动选择选项？

Question

请看一下这个自动 slider ( fiddle )。选择框允许用户跳转到特定幻灯片。当 slider 处于自动旋转模式时，我希望选择选项根据当前幻灯片进行更改。您认为通过获取数据属性(例如当前幻灯片的 title1 并将其与选项值 title1 匹配)可以吗？现在选择框固定为默认选项.

<div id="searchslider">

     <div data-title="title1"class="eventslide softblue">
     <h3 class="whitetitle">Title1</h3>
     <div class="slidebackground">
     <p>text</p>
     </div>
     </div>

     <div data-title="title2" class="eventslide softblue">
     <h3 class="whitetitle">Title2</h3>
     <div class="slidebackground">
     <p>Text</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>    
</select>

自动旋转功能:

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',0); 
 }

 autoRotate(); // start auto rotate

Answer 1

使用此代码 $('.select_title').prop('selectedIndex',C+1); 而不是 $('.select_title').prop('selectedIndex' ,0);

$( document ).ready(function() {

var intv;
var autoRotate;

var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

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

$('#left, #right,#auto').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; 
    }

  }
  $('.select_title').prop('selectedIndex',C+1); // this line added for auto select
  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',C+1);
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});
$('.select_title').change(function(){

    var optionSelected = $("option:selected", this);
    var selIndex = $(this).prop("selectedIndex");
    if (selIndex == 0) return false;
    C = selIndex - 1;

     clearInterval(intv);
    if(optionSelected){
        autoRotate(); } 


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

});

这里http://jsfiddle.net/K3bWS/