当前位置：首页 > 资讯 > 技术文档

纯javascript移动优先的幻灯片效果

时间：2020-12-10 19:48 编辑：来源：阅读：
扫一扫，手机访问

摘要：纯javascript移动优先的幻灯片效果

[b]简要教程[/b] wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小，它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们，至于这些class样式你可以完全自定义。特点有： [b]移动优先动画和过渡效果都使用CSS来生成轻量级，仅4k大小高度灵活性和可扩展性可自定义事件和API 没有任何外部依赖[/b] [img]http://files.jb51.net/file_images/article/201511/2015112111639675.jpg?2015102111646[/img] [b]使用方法 [/b]使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

[b]HTML结构[/b] 该幻灯片的基本HTML结构如下，你可以为第一个幻灯片slide添加.Wallop-item--current class。

<div class="Wallop">
 <div class="Wallop-list">
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
 </div>
 <button class="Wallop-buttonPrevious">Previous</button>
 <button class="Wallop-buttonNext">Next</button>
</div>

[b] 初始化插件[/b]

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

[b] 添加动画效果[/b] 该幻灯片插件默认是没有动画过渡效果的，如果你需要添加动画效果，需要引入相应的wallop-animation.css文件，并为元素添加Wallop--xxxx class。例如要添加淡入淡出的效果：

<head>
 <link rel="stylesheet" href="path/to/wallop.css">
 <link rel="stylesheet" href="path/to/wallop-fade.css">
</head>        
<div class="Wallop Wallop--fade">
...
</div>

[b] 可用动画类型[/b] 该幻灯片可用的过渡动画类型有： [b]Wallop--slide Wallop--fade Wallop--scale Wallop--rotate Wallop--fold Wallop--vertical-slide[/b] 上面是一些内置的过渡动画类型，你也可以自定义自己的过渡动画。 [b]配置参数 [/b]下面是一些可用的配置参数： buttonPreviousClass: 'Wallop-buttonPrevious' buttonNextClass: 'Wallop-buttonNext' itemClass: 'Wallop-item' currentItemClass: 'Wallop-item--current' showPreviousClass: 'Wallop-item--showPrevious' showNextClass: 'Wallop-item--showNext' hidePreviousClass: 'Wallop-item--hidePrevious' hideNextClass: 'Wallop-item--hideNext' carousel: true [b] 方法[/b] Wallop幻灯片插件提供了一些基本的方法用于按钮的控制： goTo 允许跳转到指定index的幻灯片上。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);

next 跳转到下一个幻灯片slide。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

previous 跳转到前一个幻灯片slide。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

事件 Wallop在每一次slide改变的时候都会发出一个事件，它返回一个detail对象，该对象包含当前slide的index和Wallop对象。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
Wallop.on('change', function(event) {
 // event.detail.wallopEl
 // => <div class="Wallop">…</div>
 
 // event.detail.currentItemIndex
 // => number
});

以上就是为大家分享的纯javascript移动优先的幻灯片效果制作过程，希望可以帮助大家制作更精美的幻灯片效果。

全部评论(0)

上一篇：记录鼠标的轨迹并回放的js代码
下一篇：图片自动缩小的js代码,用以防止图片撑破页面

资讯排行榜
更多>>