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

时间：2018-08-29 09:00:26

标签： javascript jquery html flickity

免责声明：我正在使用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>

我的问题是，如何使用幻灯片创建连续的字幕/行情效果，当您将鼠标悬停在幻灯片上时会暂停？

1 个答案:

答案 0 :(得分：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>

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

相关问题
最新问题