幻灯片/轮播

时尚简洁轮播图幻灯片特效插件

面包多

时尚简洁轮播图幻灯片特效插件-创客云
这是一款时尚简洁的 js 轮播图特效插件。该轮播图采用 es6 语法制作,底部带缩略图和描述信息,图片和描述信息在切换时同步滑动。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link href="style.css" rel="stylesheet">
  2. <script src='https://unpkg.com/flipping@1.1.0/dist/flipping.web.js'></script>

HTML 结构

  1. <div id="app" data-state="0">
  2.   <div class="ui-big-images">    
  3.     <div class="ui-big-image" data-key="0">
  4.       <img src="https://picsum.photos/1200/1200/?image=1005" alt=""/>
  5.     </div>
  6.     <div class="ui-big-image" data-key="1">
  7.       <img src="https://picsum.photos/1200/1200/?image=804" alt=""/>
  8.     </div>
  9.     <div class="ui-big-image" data-key="2">
  10.       <img src="https://picsum.photos/1200/1200/?image=838" alt=""/>
  11.     </div>
  12.     <div class="ui-big-image" data-key="3">
  13.       <img src="https://picsum.photos/1200/1200/?image=832" alt=""/>
  14.     </div>
  15.     <div class="ui-big-image" data-key="4">
  16.       <img src="https://picsum.photos/1200/1200/?image=836" alt=""/>
  17.     </div>
  18.     <div class="ui-big-image" data-key="5">
  19.       <img src="https://picsum.photos/1200/1200/?image=823" alt=""/>
  20.     </div>
  21.   </div>
  22.   <div class="ui-thumbnails">
  23.     <div class="ui-thumbnail" tabindex="-1" data-key="0">
  24.       <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
  25.       <div class="ui-cuticle" data-flip-key="cuticle"></div>
  26.     </div>
  27.     <div class="ui-thumbnail" tabindex="-1" data-key="1">
  28.       <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
  29.       <div class="ui-cuticle" data-flip-key="cuticle"></div>
  30.     </div>
  31.     <div class="ui-thumbnail" tabindex="-1" data-key="2">
  32.       <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
  33.       <div class="ui-cuticle" data-flip-key="cuticle"></div>
  34.     </div>
  35.     <div class="ui-thumbnail" tabindex="-1" data-key="3">
  36.       <img src="https://picsum.photos/1200/1200/?image=832" alt=""/>
  37.       <div class="ui-cuticle" data-flip-key="cuticle"></div>
  38.     </div>
  39.     <div class="ui-thumbnail" tabindex="-1" data-key="4">
  40.       <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
  41.       <div class="ui-cuticle" data-flip-key="cuticle"></div>
  42.     </div>
  43.     <div class="ui-thumbnail" tabindex="-1" data-key="5">
  44.       <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
  45.       <div class="ui-cuticle" data-flip-key="cuticle"></div>
  46.     </div>
  47.   </div>
  48.   <div class="ui-content">
  49.  
  50.     <nav class="ui-nav">
  51.       <button id="prev" tabindex="-1" title="Previous"><</button>
  52.       <button id="next" tabindex="-1" title="Next">></button>
  53.     </nav>
  54.  
  55.     <div class="ui-articles">
  56.       <article class="ui-article" data-key="0">
  57.         <h2 class="ui-heading">Stephen Shaw</h2>
  58.         <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
  59.       </article>
  60.       <article class="ui-article" data-key="1">
  61.         <h2 class="ui-heading">David Khourshid</h2>
  62.         <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
  63.       </article>
  64.       <article class="ui-article" data-key="2">
  65.         <h2 class="ui-heading">Coding Compadre</h2>
  66.         <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
  67.       </article>
  68.       <article class="ui-article" data-key="3">
  69.         <h2 class="ui-heading">Boolean Buddy</h2>
  70.         <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
  71.       </article>
  72.       <article class="ui-article" data-key="4">
  73.         <h2 class="ui-heading">Animation Amigo</h2>
  74.         <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
  75.       </article>
  76.       <article class="ui-article" data-key="5">
  77.         <h2 class="ui-heading">Keyframe Companion</h2>
  78.         <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
  79.       </article>
  80.     </div>
  81.   </div>
  82. </div>

初始化插件

通过下面的 js 代码来制作轮播图特效。

  1. console.clear();
  2.  
  3. const elPrevButton = document.querySelector('#prev');
  4. const elNextButton = document.querySelector('#next');
  5. const flipping = new Flipping();
  6.  
  7. const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
  8. const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
  9.  
  10. let state = {
  11.   photo: 0
  12. };
  13.  
  14. function send(event) {
  15.   // read cuticle positions
  16.   flipping.read();
  17.  
  18.   const elActives = document.querySelectorAll('[data-active]');
  19.  
  20.   Array.from(elActives)
  21.     .forEach(el => el.removeAttribute('data-active'));
  22.  
  23.   switch (event) {
  24.     case 'PREV':
  25.       state.photo--;
  26.       // Math.max(state.photo - 1, 0);
  27.       break;
  28.     case 'NEXT':
  29.       state.photo++;
  30.       // Math.min(state.photo + 1, elImages.length - 1);
  31.       break;
  32.     default:
  33.       state.photo = +event;
  34.       break;
  35.   }
  36.  
  37.   var len = elImages.length;
  38.   // Loop Around
  39.   //state.photo = ( ( state.photo % len) + len ) % len;
  40.   state.photo = Math.max(0, Math.min( state.photo, len - 1) );
  41.  
  42.   Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`))
  43.     .forEach( el => {
  44.     el.setAttribute('data-active', true);
  45.   });
  46.  
  47.   // execute the FLIP animation
  48.   flipping.flip();
  49. }
  50.  
  51. elThumbnails.forEach( thumb => { 
  52.   thumb.addEventListener('click', () => {
  53.     send(thumb.dataset.key);
  54.   });
  55. });
  56.  
  57. elPrevButton.addEventListener('click', () => {
  58.   send('PREV');
  59. });
  60.  
  61. elNextButton.addEventListener('click', () => {
  62.   send('NEXT');
  63. });
  64.  
  65. send(0);

Codepen 网址:https://codepen.io/team/keyframers/pen/pZyWPd/

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!