变量更改仅在我的jquery滑块暂停时更新,而不是在运行时更新

我编写了一个非常基本的jquery滑块,我有一个秒变量,我用它来自定义在图像之间切换所需的秒数。 我的问题是更改秒只在滑块运行时生效(暂停按钮未单击),我希望它立即更新,而不是暂停滑块,更改秒变量并再次点击播放。

我怎么能接近这个,我觉得这是一个相当容易的任务,但我是一个新手。

这是代码:

$(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 "); } }); }); 
 .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; } 
   
Play it

22-05-2017

12-08-2017

22-05-2017

10-06-2017

19-08-2017

11-08-2017

22-05-2017

19-04-2017

20-05-2017

22-08-2017

05-07-2017

如果这是你想要的,请参见下文

 $(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'); if (segundos >= 1000 && segundos < 15000) { segundos = segundos + 1000; segundoss = (segundos / 1000); $('.segundos').text(" " + segundoss + "s "); } } else { ns = $('#polaroid1').children('div.mySlides1:first'); cs.removeClass('currentslide'); ns.addClass('currentslide'); if (segundos > 1000) { segundos = segundos - 1000; segundoss = (segundos / 1000); $('.segundos').text(" " + segundoss + "s "); } } } $('.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 "); } }); }); 
 .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; } 
   
Play it

22-05-2017

12-08-2017

22-05-2017

10-06-2017

19-08-2017

11-08-2017

22-05-2017

19-04-2017

20-05-2017

22-08-2017

05-07-2017