0
Ich habe einen ziemlich einfachen jquery-Schieberegler programmiert, ich habe eine Sekundenvariable, mit der ich die Sekunden anpassen kann, die zwischen den Bildern benötigt werden. Mein Problem ist die Änderung der Sekunden wird nur wirksam, wenn der Slider läuft (Pausenknopf nicht geklickt), ich möchte es sofort aktualisieren, anstatt den Slider zu pausieren, die Sekundenvariable zu ändern und das Spiel erneut zu treffen.Variable Änderung wird nur aktualisiert, wenn mein jquery-Schieberegler pausiert ist, nicht beim Ausführen
Wie könnte ich das angehen, ich fühle mich wie es ist eine ziemlich leichte Aufgabe, aber ich bin ein bisschen wie ein Neuling. Hier
ist der Code:
$(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>
Sie Ihren Code nicht funktioniert und auch Frage ist nicht klar, wha t ist Ihre gewünschte Ausgabe –
Seltsam, es funktioniert für mich. Grundsätzlich möchte ich, dass sich die Variable segundos jedes Mal automatisch ändert, wenn auf die .resta o .suma-Klassen geklickt wird. Sie ändert sich tatsächlich, aber der Schieberegler muss pausiert werden. Ich möchte, dass es sich automatisch ändert, selbst wenn der Schieberegler – gabogabans
@gabogabans spielt, also ist es ein Duplikat .. Ich beantwortete Ihre Frage hier https://stackoverflow.com/questions/47445648/my-jquery-slider-refresh-rate-wont- update-live/47446545 # 47446545 –