JavaScript中的水平拆分滑块 - Mega Slider
栏目分类:幻灯片 / 轮播图   发布日期:2021-10-13   浏览次数:

Mega Slider 是一个响应式、现代、水平、分割的图像滑块,用 JavaScript 和 CSS 动画编写。

使用:

1. 巨型滑块所需的 HTML 结构。

<div class="container">
  <img class="logo" src="images/logo.png" alt="logo">
  <!-- Slide 1 -->
  <div id="slide-1" class="slide-container active">
    <div class="back-top"></div>
    <div class="middle">
      <div class="left-text">
        <h2>01.</h2>
        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span>
      </div>
      <div class="spirit"></div>
      <div class="right-text">
        Spirit<br/>
        of Nature
      </div>
    </div>
    <div class="back-bottom"></div>
  </div>
  <!-- Slide 2 -->
  <div id="slide-2" class="slide-container">
    <div class="back-top"></div>
    <div class="middle">
      <div class="left-text">
        <h2>02.</h2>
        <span>invidunt ut labore et dolore magna aliquyam erat est Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="spirit"></div>
      <div class="right-text">
        Spirit<br/>
        of Space
      </div>
    </div>
    <div class="back-bottom"></div>
  </div>
  <!-- Slide 3 -->
  <div id="slide-3" class="slide-container">
    <div class="back-top"></div>
    <div class="middle">
      <div class="left-text">
        <h2>03.</h2>
        <span>magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</span>
      </div>
      <div class="spirit"></div>
      <div class="right-text">
        Spirit<br/>
        of Desert
      </div>
    </div>
    <div class="back-bottom"></div>
  </div>
  <!-- Slide 4 -->
  <div id="slide-4" class="slide-container">
    <div class="back-top"></div>
    <div class="middle">
      <div class="left-text">
        <h2>04.</h2>
        <span>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="spirit"></div>
      <div class="right-text">
        Spirit<br/>
        of Forest
      </div>
    </div>
    <div class="back-bottom"></div>
  </div>
  <div class="controller">
    <div id="prev-button" class="button">Back</div>
    <div class="progress">
      <div class="value"></div>
    </div>
    <div id="next-button" class="button">Next</div>
  </div>
</div>

2. 在文档中加载所需的样式表。

<!-- Core Styles -->
<link rel="stylesheet" href="styles/main.css" />
<!-- CSS Animations -->
<link rel="stylesheet" href="styles/animations.css" />

3. 启用巨型滑块的主要 JavaScript。

var currentSlide = 1;
function updateClasses(step) {
  document.getElementById('slide-' + currentSlide).classList.remove('active');
  document.getElementById('slide-' + (currentSlide + step)).classList.add('active');
  document.querySelector('#slide-' + currentSlide + ' .back-top').classList.remove('slide-in-right', 'slide-out-right');
  document.querySelector('#slide-' + currentSlide + ' .back-bottom').classList.remove('slide-in-left', 'slide-out-left');
  document.querySelector('#slide-' + currentSlide + ' .spirit').classList.remove('slide-in-fwd', 'slide-out-bck');
  document.querySelector('#slide-' + (currentSlide + step) + ' .back-top').classList.remove('slide-in-right', 'slide-out-right');
  document.querySelector('#slide-' + (currentSlide + step) + ' .back-bottom').classList.remove('slide-in-left', 'slide-out-left');
  document.querySelector('#slide-' + (currentSlide + step) + ' .spirit').classList.remove('slide-in-fwd', 'slide-out-bck');
  document.querySelector('.value').style.width = ((currentSlide + step) * 25) + '%';
  document.querySelector('#slide-' + currentSlide + ' .back-top').classList.add('slide-out-right');
  document.querySelector('#slide-' + currentSlide + ' .back-bottom').classList.add('slide-out-left');
  window.setTimeout(function() {
      document.querySelector('#slide-' + (currentSlide + step) + ' .back-top').classList.add('slide-in-right');
      document.querySelector('#slide-' + (currentSlide + step) + ' .back-bottom').classList.add('slide-in-left');
      document.querySelector('#slide-' + currentSlide + ' .spirit').classList.add('slide-out-bck');
      document.querySelector('#slide-' + (currentSlide + step) + ' .spirit').classList.add('slide-in-fwd');
      currentSlide = currentSlide + step;
  }, 500);
}
document.getElementById('next-button').addEventListener('click', function() {
  if (currentSlide === 4) return;
  updateClasses(1);
});
document.getElementById('prev-button').addEventListener('click', function() {
  if (currentSlide === 1) return;
  updateClasses(-1);
});

官方网站:https://github.com/hoomb/mega-slider

相关热词: 滑块

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库