Question

我正在尝试开发一个简单的jquery滑块，默认情况下，幻灯片在图像和文本之间每三秒切换一次（var segundos = 3;），滑块有一个按钮，用作播放/暂停操作和菜单选项它可以让你增加或减少每次在图像之间切换的秒数。这是通过类.resta和.suma（减少和减少）来完成的。

现在，滑块工作正常，但是有一个问题，当segundos变量（segundos表示秒）更改效果时，除非滑块暂停，否则不会采取操作，它将不会在滑块运行时自动刷新。它必须是这样的：暂停滑块＆gt;更改默认秒数＆gt;播放滑块＆gt;看结果

我的目标是让它在滑块启动并运行时更改刷新率。

以下是代码：

<script>
$(document).ready(function(){
    var segundos = 3000;
    var stop = true;
    var slideInterval;

	
	$('.play').click(function(){
    if (stop == false) {
    stop = true;
	$('#playpause').text('Play it');
    clearInterval(slideInterval);
    }
    else {
    stop = false;
	$('#playpause').text('Pause it');
    slideInterval = setInterval(swapSlides, segundos);
    }
    });
	
	
    function swapSlides(){
	//var cs = $('div.currentslide:first');
	var cs = $('#polaroid1').children('.currentslide:first');
	var ns = cs.next();
	if(ns.hasClass('mySlides1')){
	cs.removeClass('currentslide');
	ns.addClass('currentslide');
    }
	else{
	ns = $('#polaroid1').children('div.mySlides1:first');
	cs.removeClass('currentslide');
	ns.addClass('currentslide');
	}
	}
	
	
    $('.resta').click(function(){
    if(segundos > 1000){
    segundos = segundos - 1000;
	segundoss = (segundos/1000);
    $('.segundos').text(" " + segundoss + "s ");
    }
    });

    $('.suma').click(function(){
    if(segundos >= 1000 && segundos < 15000){
    segundos = segundos + 1000;
	segundoss = (segundos/1000);
    $('.segundos').text(" " + segundoss + "s ");
    }
    });
	
});
</script>

.menu{
	list-style:none; 
	bottom:8px; 
	position:absolute; 
	font-family: 'Covered By Your Grace', cursive; 
	font-weight:300; 
	width:200px;
}

.menu > li{
	
}

.play{
	width:59px;
	height:52px;
	position:absolute; 
	left:5px; 
	bottom:5px; 
	cursor:pointer; 
	z-index:10000;
}

.polaroid1{
	box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5); 
	-webkit-backface-visibility: hidden; 
	transform: rotate(-8deg); 
	margin-bottom:30px; 
	width:380px; 
	height:320px; 
	background-color:rgba(255, 255, 255, 1.0); 
	text-align:right; 
	padding-top:10px; 
	padding-right:10px; 
	padding-left:10px; 
	padding-bottom:15px; 
	top:15px; 
	left:25px; 
	position:relative;
}

.photo1{
	width:100%;  
	height:85%; 
	position:relative;
	padding:5px;
}

.date1{
	margin:0; 
	padding-right:10px; 
	font-family: 'Covered By Your Grace', cursive; 
	transform: rotate(-5deg);
	font-size:28px;
}

.mySlides1{
	display:none;
	width:380px; 
	height:320px; 
	position:absolute; 
	top:0px; 
	left:0px;
}

.currentslide{display:block;}

<ul class="menu hide">
	<li style="font-size:22px; margin-top:8px;">Diapositivas:  <span class="resta" style="cursor:pointer;">< </span><span class="segundos">3s</span><span class="suma" style="cursor:pointer;"> ></span></li>
  </ul>
</div>
<div id="polaroid1" class="polaroid1">
  <div class="tooltip2 play" style="background-image: url('images/heart2.png');"><span id="playpause" class="tooltiptext2">Play it</span></div>
  <div class="mySlides1 fade currentslide">
    <img class="photo1" src="images/IMG-20170610-WA0028.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170812_181516.jpg">
    <h3 class="date1">12-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170522_112958.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/IMG-20170610-WA0017.jpg">
    <h3 class="date1">10-06-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170819_194526.jpg">
    <h3 class="date1">19-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170811_182103.jpg">
    <h3 class="date1">11-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170522_124602.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170419_020725.jpg">
    <h3 class="date1">19-04-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170520_115819.jpg">
    <h3 class="date1">20-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170822_011703.jpg">
    <h3 class="date1">22-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="images/20170705_184344.jpg">
    <h3 class="date1">05-07-2017</h3>
  </div>
</div>

Answer 1

它必须是这样的：暂停滑块＆gt;更改默认秒数＆gt;玩   滑块＆gt;看结果

我的目标是让它改变刷新率   滑块已启动并正在运行。

这是因为当你增加/减少幻灯片间隔时间（segundos）时，你永远不会对slideInterval做任何事情。

解决方案：

添加功能以重新启动slideInterval，如下所示：

 function _restartSlide() {     
      clearInterval(slideInterval);
      slideInterval = setInterval(swapSlides, segundos);   
 }

jsfiddle link https://jsfiddle.net/sudarpochong/2za1ccra/1/

我的jquery滑块刷新率不会实时更新

1 个答案: