Question

不久前，我在自己的网站上实现了一个老虎机库。我的意图是允许用户像投币机一样无限滚动图标。尽管我不知道该如何做，就像文档/图书馆网站所提供的那样。我的网站倒是回过头来，经过了所有其他图标，而不是像无限滚动一样。

我所拥有的： https://gyazo.com/a265ec86bce7316098232608e723cadf

我想要的东西： https://gyazo.com/0f592ae2ce8c7951aa2b9095faafb01e

示例代码：

// Set up previous button
const btnPrev = document.querySelector('#prev');

// Set up Next Button
const btnNext = document.querySelector('#next');

// Set up our container
const el = document.querySelector('#theContainer');

// Create new SlotMachine
const slot = new SlotMachine(el, {});

// Add Event Listeners or do things when we click it
btnPrev.addEventListener('click', () => slot.prev());
btnNext.addEventListener('click', () => slot.next());

<link href="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/jquery.slotmachine.min.css">
</style>

<div id="theContainer" class="container" style="width: 100px; height: 100px">
  <div><img src="https://picsum.photos/100/?image=0"></div>
  <div><img src="https://picsum.photos/100/?image=1"></div>
  <div><img src="https://picsum.photos/100/?image=2"></div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

<!-- Add script files -->
<script src="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/slotmachine.min.js"></script>

如何为老虎机JS创建无限滚动的循环

0 个答案: