2013-08-28 92 views
0

我是一个新手,仍在学习,我无法完全解决问题。我有下面的代码,我想添加自动播放功能的滑块。很欣赏帮助。Javascript滑块自动播放

$('.feature-selection').click(function() { 
     if (!$(this).hasClass('active-feature')) { 
      var featureID = '#' + $(this).attr('data-feature-id'); 
      $('.active-feature').removeClass('active-feature'); 
      $(this).addClass('active-feature'); 
      $('.active-feature-detail').addClass('fadeOutLeftBig'); 
      setTimeout(function() { 
       $('.fadeOutLeftBig').removeClass('active-feature-detail'); 
      }, 500); 
      setTimeout(function() { 
       $('.fadeOutLeftBig').removeClass('fadeOutLeftBig'); 
      }, 600); 
      $(featureID).addClass('fadeInRightBig'); 
      var that = featureID; 
      setTimeout(function() { 
       $(that).removeClass('fadeInRightBig'); 
      }, 1000); 
      $(featureID).addClass('active-feature-detail'); 
      var newFeatureHeight = $(featureID).height() + 88; 

      $('#feature-detail-holder').css('min-height', newFeatureHeight); 
     } 
    }); 

回答

0
var interval = null; 
$('#autoplay-button').click(function(){ 
    interval = setInterval(function(){ 
     $('.feature-selection').trigger('click'); 
    }, 10000); 
}); 

$('#stop-autoplay-button').click(function(){ 
    clearInterval(interval); 
}); 

$('.feature-selection').click(function() { 
    if (!$(this).hasClass('active-feature')) { 
     var featureID = '#' + $(this).attr('data-feature-id'); 
     $('.active-feature').removeClass('active-feature'); 
     $(this).addClass('active-feature'); 
     $('.active-feature-detail').addClass('fadeOutLeftBig'); 
     setTimeout(function() { 
      $('.fadeOutLeftBig').removeClass('active-feature-detail'); 
     }, 500); 
     setTimeout(function() { 
      $('.fadeOutLeftBig').removeClass('fadeOutLeftBig'); 
     }, 600); 
     $(featureID).addClass('fadeInRightBig'); 
     var that = featureID; 
     setTimeout(function() { 
      $(that).removeClass('fadeInRightBig'); 
     }, 1000); 
     $(featureID).addClass('active-feature-detail'); 
     var newFeatureHeight = $(featureID).height() + 88; 

     $('#feature-detail-holder').css('min-height', newFeatureHeight); 
    } 
}); 
+0

我可能是智障,但如何运作的?我尝试了不同的方法,现在卡住了:/ –

+0

滑块的整个引擎都是在'.feature-selection'上单击事件引发时调用的函数中完成的。我写的想法是,你设置了一个触发'.feature-selection'元素的点击事件的时间间隔。 –