Question

所以我该如何使用setInterval使我的自定义jquery滑块每X秒更改为下一个幻灯片，我还设置了next和prev按钮来自由地浏览滑块，问题是我希望计时器在其中一个重启时重新启动按钮被点击。我该怎么办？

这是我的jquery滑块的逻辑，我认为这很简单。我使用活动类使选定的滑块可见。

var interval = 7000;
	var sliders = $('.slider');
	var dots = $('.dot');
	var index = 0;
	var show_index = 0;
  
  //make first slider visible
	    $('.slider').eq(show_index).addClass('slider_active');
		//give first navigation dot the active class
	    $('.dot').eq(show_index).addClass('slider_active_dot');
	    console.log(show_index);
	    console.log(sliders.length);
	
	
	    setInterval(function() {
        
		    if(show_index == (sliders.length- 1)){
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0;	// set it here
		        $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');			
			    console.log(show_index);
		    }
		
		    else{
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here	
		        $('.slider').eq(show_index).addClass('slider_active');
			    $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);			
		    }
        }, interval);
	
	
	
	
	    $('.prev').click(function(){
		
		    console.log('clicked prev');
		
		        if(show_index == 0){
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = (sliders.length - 1);// set it here
		        $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');			
			    console.log(show_index);
		    }
		
		    else{
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index - 1; // set it here	
		        $('.slider').eq(show_index).addClass('slider_active');
			    $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);			
		    }
        });
	
	
	
	    $('.next').click(function(){
		
		    console.log('clicked next');
		
		    if(show_index == (sliders.length- 1)){
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0;	// set it here
		        $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
			    console.log(show_index);
		    }
		
		    else{
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here	
		        $('.slider').eq(show_index).addClass('slider_active');
			    $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);			
		    }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

将setInterval()分配给一个变量，您可以使用该变量清除单击下一个或上一个按钮时的间隔。

var interval = 7000;
	var sliders = $('.slider');
	var dots = $('.dot');
	var index = 0;
	var show_index = 0;
  function timer(){
     if(show_index == (sliders.length- 1)){
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0;	// set it here
		        $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');			
			    console.log(show_index);
		    }
		
		    else{
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here	
		        $('.slider').eq(show_index).addClass('slider_active');
			    $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);			
		    }
  }
  
  //make first slider visible
	    $('.slider').eq(show_index).addClass('slider_active');
		//give first navigation dot the active class
	var itvl;
  $('.dot').eq(show_index).addClass('slider_active_dot');
	    console.log(show_index);
	    console.log(sliders.length);
	
	
	    itvl = setInterval(function() {
		    timer();
        }, interval);
	
	
	
	
	    $('.prev').click(function(){
		
		    console.log('clicked prev');
		
		        if(show_index == 0){
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = (sliders.length - 1);// set it here
		        $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');			
			    console.log(show_index);
		    }
		
		    else{
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index - 1; // set it here	
		        $('.slider').eq(show_index).addClass('slider_active');
			    $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);			
		    }
        clearInterval(itvl);
        itvl = setInterval(function(){
         timer();
        }, interval);
        });
	
	
	
	    $('.next').click(function(){
		
		    console.log('clicked next');
		
		    if(show_index == (sliders.length- 1)){
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = 0;	// set it here
		        $('.slider').eq(show_index).addClass('slider_active');
                $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
			    console.log(show_index);
		    }
		
		    else{
			
			
			    $('.slider').eq(show_index).removeClass('slider_active');
                show_index = show_index + 1; // set it here	
		        $('.slider').eq(show_index).addClass('slider_active');
			    $('.dot').removeClass('slider_active_dot');			
			    $('.dot').eq(show_index).addClass('slider_active_dot');
                console.log(show_index);			
		    }
         clearInterval(itvl);
        itvl = setInterval(function(){
         timer();
        }, interval);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="next">Next</button>
<p/>
<button class="prev">Previous</button>

Answer 2

我建议使用setTimeout和clearTimeout。每次移动滑块时清除并设置。在此处查看文档和示例示例：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

单击nextprev按钮时重置计时器

2 个答案: