幻灯片/轮播

左右两侧分屏动画图片轮播jQuery特效

创客主机


这是一款js左右两侧分屏动画轮播图特效。该轮播图特效中,图片和描述文本分居屏幕的两侧,在鼠标上下滚动时,图片和描述文本做上下相对运动,效果非常炫酷。

使用方法

在页面中引入style.css文件

  1. <link href="css/style.css" rel="stylesheet">

HTML结构

该轮播图的html结构如下:

  1. <div class="wrapper">
  2.      <div class="container">
  3.          <div class="slideshow">
  4.               <div class="slideshow-left">
  5.                   <div class="Lslide">
  6.                       <div class="Lslide-content">
  7.                           <h2>Probably not</h2>
  8.                           <p>Be a part of our creation</p>
  9.                           <div class="button">
  10.                               <a href="#">
  11.                                   <p>More</p>
  12.                                   <i class="fa fa-chevron-right" aria-hidden="true"></i>
  13.                               </a>
  14.                           </div>
  15.                       </div>
  16.                   </div>
  17.                   <div class="Lslide">
  18.                       <div class="Lslide-content">
  19.                           <h2>But not today</h2>
  20.                           <p>Be a part of our creation</p>
  21.  
  22.                           <div class="button">
  23.                               <a href="#">
  24.                                   <p>More</p>
  25.                                   <i class="fa fa-chevron-right" aria-hidden="true"></i>
  26.                               </a>
  27.                           </div>
  28.                       </div>
  29.                   </div>
  30.                   <div class="Lslide">
  31.                       <div class="Lslide-content">
  32.                           <h2>Probably not</h2>
  33.                           <p>Be a part of our creation</p>
  34.  
  35.                           <div class="button">
  36.                               <a href="#">
  37.                                   <p>More</p>
  38.                                   <i class="fa fa-chevron-right" aria-hidden="true"></i>
  39.                               </a>
  40.                           </div>
  41.                       </div>
  42.                   </div>    
  43.               </div>
  44.               <div class="slideshow-right">
  45.                   <div class="Rslide">
  46.                       <img src="img/flower-3.jpg" alt="">
  47.                   </div>
  48.  
  49.                   <div class="Rslide">
  50.                       <img src="img/flower-5.jpg" alt="">
  51.                   </div>     
  52.                   <div class="Rslide">
  53.                       <img src="img/flower-1.jpg" alt="">
  54.                   </div>                                              
  55.               </div>    
  56.               <div class="control">
  57.                   <div class="oncontrol control-top">
  58.                       <i class="fa fa-arrow-up" aria-hidden="true"></i>
  59.                   </div>
  60.                   <div class="oncontrol control-bottom">
  61.                       <i class="fa fa-arrow-down" aria-hidden="true"></i>
  62.                   </div>                          
  63.               </div>
  64.          </div>
  65.      </div>
  66.  </div>

javaScript

然后在页面DOM元素加载完毕之后,通过下面的方法来初始化该轮播图。

  1. var Lslide      = document.querySelectorAll('.Lslide'),
  2.     Rslide      = document.querySelectorAll('.Rslide'),
  3.     control     = document.querySelectorAll('.oncontrol'),
  4.     slideHeight = document.querySelector('.wrapper').clientHeight,
  5.     color = ['#fdc97c', '#e5d3d0', '#71b3d6'],
  6.     index = 0;
  7.  
  8.  
  9. function init() {
  10.     slideHeight = document.querySelector('.wrapper').clientHeight;
  11.     for (i = 0; i < Lslide.length; i++) {
  12.         Lslide[i].style.backgroundColor = color[i];
  13.         Lslide[i].style.top = -slideHeight * i + "px";
  14.         Rslide[i].style.top = slideHeight * i + "px";
  15.     }  
  16. }
  17. init()
  18. window.addEventListener('resize', function(){
  19.     init()
  20. });
  21.  
  22. function moveToTop() {
  23.  
  24.     index++;
  25.     for (el = 0; el < Lslide.length; el++) {
  26.         Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight + "px";
  27.         Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight + "px";
  28.     }
  29.  
  30.     if (index > Lslide.length-1) {
  31.         index = 0;
  32.         for (el = 0; el < Lslide.length; el++) {
  33.             Lslide[el].style.top = -slideHeight * el + "px";
  34.             Rslide[el].style.top = slideHeight * el + "px";
  35.         }
  36.     }
  37. }
  38.  
  39. function moveToBottom() {
  40.     index--;
  41.     for (el = 0; el < Lslide.length; el++) {
  42.         Lslide[el].style.top = parseInt(Lslide[el].style.top) - slideHeight + "px";
  43.         Rslide[el].style.top = parseInt(Rslide[el].style.top) + slideHeight + "px";
  44.  
  45.     }
  46.     if (index < 0) {
  47.         index = Rslide.length-1;
  48.         for (el = 0; el < Lslide.length; el++) {
  49.             Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight * Lslide.length + "px";
  50.             Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight * Rslide.length + "px";
  51.         }
  52.     }
  53. }
  54.  
  55. function transition() {
  56.     for (t = 0; t < Lslide.length; t++) {
  57.         Lslide[t].style.transition = "all 0.8s";
  58.         Rslide[t].style.transition = "all 0.8s";
  59.     }
  60. }
  61.  
  62.  
  63. for (t = 0; t < control.length; t++) {
  64.     control[t].addEventListener("click", function() {
  65.  
  66.         if (this.classList.contains('control-top')) {
  67.             moveToTop()
  68.         } 
  69.         if (this.classList.contains('control-bottom')) {
  70.             moveToBottom()
  71.         }
  72.  
  73.         transition()
  74.  
  75.     });
  76. }
  77.  
  78. var wheeling;
  79. function mousemouve(e) {
  80.  
  81.     clearTimeout(wheeling);
  82.     e.preventDefault();
  83.     var e = window.event || e; 
  84.     var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  85.  
  86.     wheeling = setTimeout(function() {
  87.         wheeling = undefined;
  88.         if (delta === 1) {
  89.             moveToTop()
  90.         }
  91.         if (delta === -1) {
  92.             moveToBottom()
  93.         }
  94.     }, 100);
  95.  
  96.     transition()
  97. }
  98.  
  99. document.addEventListener("mousewheel", mousemouve);
  100. document.addEventListener("DOMMouseScroll", mousemouve);

Codepen地址:https://codepen.io/GrandvincentMarion/pen/NaEELP

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!