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

网络编程 2024/11/14 佚名

3 2 1

简要教程
wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小，它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们，至于这些class样式你可以完全自定义。特点有：
移动优先
动画和过渡效果都使用CSS来生成
轻量级，仅4k大小
高度灵活性和可扩展性
可自定义事件和API
没有任何外部依赖

使用方法
使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。

<link rel="stylesheet" href="path/to/wallop.css">
<script src="/UploadFiles/2021-04-02/Wallop.min.js">

HTML结构
该幻灯片的基本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>        



 初始化插件


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



 添加动画效果
该幻灯片插件默认是没有动画过渡效果的，如果你需要添加动画效果，需要引入相应的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>        



 可用动画类型
该幻灯片可用的过渡动画类型有：

Wallop--slide

Wallop--fade

Wallop--scale

Wallop--rotate

Wallop--fold

Wallop--vertical-slide

上面是一些内置的过渡动画类型，你也可以自定义自己的过渡动画。

 配置参数

下面是一些可用的配置参数：

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

 方法

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移动优先的幻灯片效果制作过程，希望可以帮助大家制作更精美的幻灯片效果。

javascript幻灯片代码,javascript幻灯片,javascript图片幻灯片,javascript移动div

标签：

javascript幻灯片代码,javascript幻灯片,javascript图片幻灯片,javascript移动div

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“纯javascript移动优先的幻灯片效果”

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

暂无“纯javascript移动优先的幻灯片效果”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

javascript幻灯片代码,javascript幻灯片,javascript图片幻灯片,javascript移动div

jquery 表单验证之通过 class验证表单不为空

JS实现点击按钮获取页面高度的方法

评论“纯javascript移动优先的幻灯片效果”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接