0
かなり基本的な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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
欲しいものであれば、あなたのコードが動作しても、質問されていません、以下を参照してくださいはっきりしていないtはあなたの望む出力です –
奇妙な、私のために働いています。基本的には、.resta o .sumaクラスがクリックされるたびにsegundos変数が自動的に変更されるようにします。実際には変更されますが、スライダは一時停止する必要があります。私はそれが自動的にスライダーが – gabogabans
@ gabogabansを再生しているときにも変更したいので、それは重複して..私はここであなたの質問に答えたhttps://stackoverflow.com/questions/47445648/my-jquery-slider-refresh-rate-wont- update-live/47446545＃47446545 –