![[代码样式]Ideal Image Slider – 简单的纯JS幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/7jv6Bh1707.jpg "[代码样式]Ideal Image Slider – 简单的纯JS幻灯片")
简介
Ideal Image Slider 是一个简单的纯 JavaScript 幻灯片，它没有过多复杂臃肿的东西，正因这样，所以又很容易为其添加扩展。官方也提供了 2 个扩展，一个用于添加项目导航，另一个用于添加标题或描述。
Ideal Image Slider 有以下特点：
- 使用 HTML5 结构，对搜索引擎友好
- 使用 CSS3 启用硬件加速
- 支持键盘方向键导航
- 响应式，适用于任何尺寸的设备
- 支持高清视网膜设备
浏览器兼容
![[代码样式]Ideal Image Slider – 简单的纯JS幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/myJcfT1694.png "[代码样式]Ideal Image Slider – 简单的纯JS幻灯片"){kind=small} |
![[代码样式]Ideal Image Slider – 简单的纯JS幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/sKKNqV1694.png "[代码样式]Ideal Image Slider – 简单的纯JS幻灯片"){kind=small} |
![[代码样式]Ideal Image Slider – 简单的纯JS幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/3dMJ071694.png "[代码样式]Ideal Image Slider – 简单的纯JS幻灯片"){kind=small} |
![[代码样式]Ideal Image Slider – 简单的纯JS幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/J1fEzh1694.png "[代码样式]Ideal Image Slider – 简单的纯JS幻灯片"){kind=small} |
![[代码样式]Ideal Image Slider – 简单的纯JS幻灯片](https://www.weimahe.com/wp-content/uploads/2020/08/mUTY3d1694.png "[代码样式]Ideal Image Slider – 简单的纯JS幻灯片"){kind=small} |
|---|---|---|---|---|
| IE9+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
Ideal Image Slider 使用了 CSS3，不兼容 IE 低版本，在 IE9 上也不支持动画效果。
使用方法
1、引入文件
<link rel="stylesheet" href="https://www.dowebok.com/css/ideal-image-slider.css" rel="external nofollow" > <link rel="stylesheet" href="https://www.dowebok.com/themes/default/default.css" rel="external nofollow" > <script src="https://www.dowebok.com/js/ideal-image-slider.min.js"></script>
官方还提供了 2 个扩展：
- iis-bullet-nav.js – 用于显示项目导航
- iis-captions.js – 用于显示标题或描述
如果需要请一并引入。
2、HTML
<div class="dowebok"> <div id="slider"> <img src="https://www.dowebok.com/img/1.jpg" data-src-2x="/img/1@2x.jpg" alt=""> <img data-src="https://www.dowebok.com/img/2.jpg" data-src-2x="/img/2@2x.jpg" alt=""> <img data-src="https://www.dowebok.com/img/3.jpg" data-src-2x="/img/3@2x.jpg" alt=""> <img data-src="https://www.dowebok.com/img/4.jpg" data-src-2x="/img/4@2x.jpg" alt=""> </div> </div>
你可以使用 data-src 属性用来延迟加载图片，但第一张最好不要使用，避免用户禁用了 JavaScript 而无法显示任何内容。你还可以使用 data-src-2x 属性，指定适用于 HiDPI 高清设备的图片，如苹果公司的 Retina 设备。
3、JavaScript
new IdealImageSlider.Slider('#slider');
更多用法请查看演示。
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selector | 字符串 | 空 | 选择器 |
| height | 整数 | 400 | 自动隐藏 |
| interval | 整数 | 4000 | 切换间隔 |
| transitionDuration | 整数 | 700 | 动画持续时间 |
| effect | 字符串 | slide | 切换动画方式，可选 slide、fade |
| disableNav | 布尔值 | false | 隐藏左右控制箭头 |
| keyboardNav | 布尔值 | true | 使用键盘方向键控制 |
| previousNavSelector | 布尔值 | true | 绑定“上一个”按钮 |
| nextNavSelector | 布尔值 | true | 绑定“下一个”按钮 |
| classes | 对象 | 为幻灯片设置 class | |
| onInit | 函数 | 初始化后的回调函数 | |
| onStart | 函数 | 开始后的回调函数 | |
| onStop | 函数 | 停止后回调函数 | |
| onDestroy | 函数 | 销毁后的回调函数 | |
| beforeChange | 函数 | 切换前的回调函数 | |
| afterChange | 函数 | 切换完成后的回调函数 |
GitHub 地址：https://github.com/gilbitron/Ideal-Image-Slider
[b2_file link="
百度网盘" name="Ideal Image Slider – 简单的纯JS幻灯片" pass="" code=""]
