时间戳

首页 > 解决方案 > 有没有办法在下一个/上一个按钮上使用以下 Siema 排列？

javascript - 有没有办法在下一个/上一个按钮上使用以下 Siema 排列？

问题描述

我正在使用可爱而简单的 Siema 脚本制作一个简单的轮播。它每 4 秒自动移动到下一张幻灯片，还允许我添加上一张/下一张按钮，以便用户可以手动更改幻灯片。

这是代码笔：https ://codepen.io/anon/pen/ebqodx

HTML：

<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

JS：

// perPage accepts two kind of data as a value

// Number:
// fixed amount of slider for all resolutions

// example:
// const mySiema = new Siema({
//   perPage: 2,
// });


// Object
// more complex configuration allows you to specify
// number of slides dependable of browsers viewport
// example below show single slide on small viewpoer
// 2 slider on scrrens wider than 768px
// 3 slider on scrrens wider than 1024px

// example:
// const mySiema = new Siema({
//   perPage: {
//     768: 2,
//     1024: 3,
//   },
// });
const mySiema = new Siema({
  perPage: 2,
  loop: true,
});
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

prev.addEventListener('click', () => mySiema.prev());
next.addEventListener('click', () => mySiema.next());

setInterval(() => mySiema.next(), 4000)

但是，当我单击上一个/下一个按钮（查看特定的“幻灯片”）时，自动播放会继续并迅速将我从我想要查看的幻灯片中带走。

所以我想要实现的是：当用户使用上一个/下一个按钮时，我希望自动播放停止 60 秒，以便他们有时间阅读他们想要的幻灯片。60 秒后，我希望自动播放像以前一样继续。

有什么办法可以做到这一点吗？

我已经尝试过使用 setInterval 和其他一些想法，但似乎无法让它发挥作用。我看到这家伙已经能够实现我想要的：https ://codepen.io/anon/pen/aPexBe

但问题是他使用并为他的幻灯片生成分页，这是我不想要的。我希望当用户使用下一个/上一个按钮而不是分页按钮时自动播放停止。我不需要那个。

标签： javascriptsetintervalsiema

解决方案

这是带有鼠标拖动验证的更新版本。

const mySiema = new Siema({
  perPage: 2,
  loop: true,
});
var wait = 6000; // 6 secounds in ms, increase it as you like.
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

prev.addEventListener('click', () => { Bind(wait); mySiema.prev();});
next.addEventListener('click', () => { Bind(wait); mySiema.next();});

    var interval;
    var timeout;
    var mouseDown = false;
    function Bind(secound){
      clearInterval(interval);
      clearTimeout(timeout)
      if (secound){
       timeout= setTimeout(function(){
          interval= setInterval(() => mySiema.next(), 4000)
        }, secound)
      }else interval= setInterval(() => mySiema.next(), 4000)
    }

    $('.siema').mousedown(function(event) {
    mouseDown = true;
    }).mouseup(function(){
     var mouseDown = false;
    }).mousemove(function(e){
       if (mouseDown)
         Bind(wait);
    });

    Bind();

推荐阅读