个人中心
gpt4 book ai didi

Reset timer when using prev next button on a slideshow(在幻灯片上使用上一步按钮时重置计时器)

转载 作者：bug小助手 更新时间：2023-10-28 21:31:24 25 4
gpt4 key购买 nike



I have a slideshow of images,that it changes automatically( autoslide() ) every 5 sec, so when i press one of the next/back buttons, the countdown continues.

我有一个图像的幻灯片，它每5秒自动改变一次(autoslide())，所以当我按下Next/Back按钮之一时，倒计时继续。


How I want to behaves : When one of the next/back buttons is pressed, the autoslide function countdown starts over from 0 seconds, without continuing the previous countdown.

我想要的行为方式：当按下Next/Back按钮之一时，自动幻灯片功能倒计时从0秒开始，不继续前一次倒计时。


JAVASCRIPT

JavaScrip


$(document).ready(function(){
  var $prev = $('.previousx');
  var $next = $('.nextx');
  var mode = "auto";
  $prev.on({
    click: function(e){
      e.preventDefault();
      mode = "auto";
      showPreviousImage();
    }
  });
  $next.on({
    click: function(e){
      e.preventDefault();
      mode = "auto";
      showNextImage();
      
    }
  });
  
  setInterval(function(){
    if(mode==="auto"){
      showNextImage();
    }
  },5000);
  
  
  
  function showNextImage(){
      var $actEl = $('.activx');
      var $nextEl = $actEl.next('.slidex');
      if($nextEl.length){
        $actEl.removeClass('activx');
        $nextEl.addClass('activx');
      }else{
        $actEl.removeClass('activx');
        $('.slidex:first-child').addClass('activx');
      }
  }
  
  function showPreviousImage(){
      var $actEl = $('.activx');
      var $prevEl = $actEl.prev('.slidex');
      if($prevEl.length){
        $actEl.removeClass('activx');
        $prevEl.addClass('activx');
      }else{
        $actEl.removeClass('activx');
        $('.slidex.last').addClass('activx');
      }
  }
});



更多回答

Welcome to Stack Overflow! Please visit help center, take tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet

欢迎来到Stack Overflow！请访问帮助中心，参观一下，看看问什么和怎么问。做一些研究，在上面搜索相关的主题；如果你陷入困境，发布一个最小的可重现的尝试示例，注明输入和预期输出，最好是在Stack代码片断中

优秀答案推荐

Save your setInterval in a variable and on button click reset interval using clearInterval. And re-assign the variable with new setInterval

将setInterval保存在一个变量中，然后单击按钮，使用clearInterval重置间隔。并使用新的setInterval重新分配变量


Maybe try this.

也许你可以试试这个。


const autoChange = () => {
   if(mode==="auto"){
      showNextImage();
    }
}

let interval = setInterval(autoChange,5000);

$next.on({
    click: function(e){
      e.preventDefault();
      mode = "auto";
      showNextImage();
      clearInterval(interval);
      interval = setInterval(autoChange,5000);
    }
});

更多回答

I don't have enough knowledge to do this

我没有足够的知识来做这件事

I've added code in the answer, try it.

我已经在答案中添加了代码，试试看。

good working thank you

工作很好，谢谢

25 4 0
文章推荐： python - 如何在 Python 中 gzip 压缩字符串？
文章推荐： Python:tf-idf-cosine:查找文档相似度
文章推荐： python - 如何在 Django 中重置数据库？我得到一个命令 'reset' not found 错误
文章推荐： python - 在保持项目排序的同时从列表中获取随机样本？
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com