variable change only updates when my jquery slider

2019-08-24 17:34发布

站内问答 / jQuery
1444 1 6

I coded a pretty basic jquery slider, I have a seconds variable which I use to customize the seconds it takes to switch between images. My problem is changing the seconds only takes effect when the slider is running (pause button not clicked), I would like itto instantly update instead of having to pause the slider, change the seconds variable and hitting play again.

How could I approach this, I feel like it's a fairly easy task but I am kind of a js newbie.

Here is the 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>

1条回答
forever°为你锁心
2楼-- · 2019-08-24 18:27

See below if this is what you want 

$(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;
}
<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;">&lt; </span>
    <span class="segundos">3s</span>
    <span class="suma" style="cursor:pointer;"> &gt;</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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)