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

时间：2017-11-22 17:13:14

标签： jquery slider refresh

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

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

以下是代码：

＆＃13;
＆＃13; 
$(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 ");
    }
  });

});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

如果这是你想要的话，请参阅下文

＆＃13;
＆＃13; 
$(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 ");
    }
  });

});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题