当前位置:主页 > 网页特效 > 焦点图 >

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

发布时间:2019/06/30?来源:互联网?浏览:?关键词:轮播图?
时尚简洁的js轮播图特效插件 时尚简洁的js轮播图特效插件
阿里云
简要教程

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

?使用方法

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


?HTML结构

     
    
      
    
< > Stephen Shaw Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta. David Khourshid Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. Coding Compadre Lorem ipsum dolor sit, amet consectetur adipisicing elit. Boolean Buddy Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animation Amigo Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus Keyframe Companion Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti
?初始化插件

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

console.clear();
 
const elPrevButton = document.querySelector('#prev');
const elNextButton = document.querySelector('#next');
const flipping =newFlipping();
 
const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));
 
let state = {
  photo: 0
};
 
functionsend(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;
  }
   
  varlen = 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);

该轮播图插件的codepen网址为:https://codepen.io/team/keyframers/pen/pZyWPd/

共有人阅读,期待你的评论!评论
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top