如何在滑块内实现字幕/股票行情效果？

Question

免责声明：我正在使用flickity-slider库来实现基本的幻灯片显示效果。

我创建了一个包含各种<div>元素的幻灯片，其中都包含一个图片元素，一个标题和一些内容。 使用以下模拟HTML结构：

 .b-slider__slides { display: flex; flex-flow: row nowrap; width: 100%; overflow: hidden; } .b-slider__slide { margin: 0 2.5rem; text-align: center; } a { color: #000; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="b-slider__slides js-main-slider"> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> </div> 

使用flickity-slider （版本2.1.2）和jQuery，我可以基于以下结构生成幻灯片：

 $(document).ready(() => { const mainTicker = new Flickity('.js-main-slider', { accessibility: true, wrapAround: true, prevNextButtons: true, pageDots: false, autoPlay: true }); }); 

 @import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css'); .b-slider__slides { width: 100%; background: blue; overflow: hidden; } .b-slider__slide { margin: 0 2.5rem; text-align: center; background: red; width: 30rem; height: 20rem; } a { display: flex; flex-flow: column nowrap; background: red; color: #000; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"></script> <div class="b-slider__slides js-main-slider"> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> </div> 

我的问题是，如何使用幻灯片创建连续的字幕/行情类似效果，将其悬停在幻灯片上就可以暂停？

Answer 1

关于此主题，有很多争论，原始作者选择不实现这样的功能，因为水平无限滚动不值得额外的复杂性。

但是 ...

在研究了上面的代码并研究了koraysels提供的部分解决方案之后 ，我想到了以下（有效的！）代码段：

 const mainTicker = new Flickity('.js-main-slider', { accessibility: true, resize: true, wrapAround: true, prevNextButtons: false, pageDots: false, percentPosition: true, setGallerySize: true, }); // Set initial position to be 0 mainTicker.x = 0; // Start the marquee animation play(); // Main function that 'plays' the marquee. function play() { // Set the decrement of position x mainTicker.x -= 1.5; // Settle position into the slider mainTicker.settle(mainTicker.x); // Set the requestId to the local variable requestId = window.requestAnimationFrame(play); } // Main function to cancel the animation. function pause() { if(requestId) { // Cancel the animation window.cancelAnimationFrame(requestId) // Reset the requestId for the next animation. requestId = undefined; } } // Pause on hover/focus $('.js-main-slider').on('mouseenter focusin', e => { pause(); }) // Unpause on mouse out / defocus $('.js-main-slider').on('mouseleave', e => { play(); }) 

 @import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css'); .b-slider__slides { width: 100%; background: blue; overflow: hidden; } .b-slider__slide { margin: 0 2.5rem; text-align: center; background: red; width: 30rem; height: 20rem; } a { display: flex; flex-flow: column nowrap; background: red; color: #000; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"></script> <div class="b-slider__slides js-main-slider"> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> </div> 

如果您希望获得纯粹的字幕效果，则可能需要禁用拖放功能，但这完全适合我的用例。