时尚简洁的js轮播图特效插件

时尚简洁的js轮播图特效插件

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

使用方法
在页面中引入下面的文件。

1
2
<link href="style.css" rel="stylesheet">
<script src='https://unpkg.com/flipping@1.1.0/dist/flipping.web.js'></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div id="app" data-state="0">
  <div class="ui-big-images">    
    <div class="ui-big-image" data-key="0">
      <img class="aligncenter size-full wp-image-26414" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609T1v3S3.jpg">
    </div>
    <div class="ui-big-image" data-key="1">
      <img class="aligncenter size-full wp-image-26415" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609z4N7ps.jpg">
    </div>
    <div class="ui-big-image" data-key="2">
      <img class="aligncenter size-full wp-image-26416" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609vGjeOV.jpg">
    </div>
    <div class="ui-big-image" data-key="3">
      <img class="aligncenter size-full wp-image-26419" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609pRF93d.jpg">
    </div>
    <div class="ui-big-image" data-key="4">
      <img class="aligncenter size-full wp-image-26417" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/201906093hXCNY.jpg">
    </div>
    <div class="ui-big-image" data-key="5">
      <img class="aligncenter size-full wp-image-26418" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609ri8Z8v.jpg">
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img class="aligncenter size-full wp-image-26414" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609T1v3S3.jpg">
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img class="aligncenter size-full wp-image-26415" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609z4N7ps.jpg">
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img class="aligncenter size-full wp-image-26416" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609vGjeOV.jpg">
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img class="aligncenter size-full wp-image-26419" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609pRF93d.jpg">
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img class="aligncenter size-full wp-image-26417" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/201906093hXCNY.jpg">
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img class="aligncenter size-full wp-image-26418" title="时尚简洁的js轮播图特效插件" alt="时尚简洁的js轮播图特效插件" width="1200" height="1200" src="https://pic.cnwebe.com/wp-content/uploads/2019/06/20190609ri8Z8v.jpg">
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">
     
    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous"><</button>
      <button id="next" tabindex="-1" title="Next">></button>
    </nav>
     
    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

初始化插件
通过下面的js代码来制作轮播图特效。

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

发表评论