插件描述：简单易用的轻量级轮播图组件。
更新时间：2019-12-17 23:47:57
HappyImage 轮播图组件
依赖
jQuery （1.8.0 或以上版本）
兼容
Chrome, Firefox, Edge, Safari, IE9+
安装
引入 jQuery 和 HappyImage 文件
<script src="jquery.min.js"></script> <script src="happyimage.min.js"></script>
使用
// 创建 $( selector ).HappyImage( options ); // 销毁 $( selector ).destroyHappyImage(); // 异步控制 HappyImage( selector, index );
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HappyImage</title>
<style>
#target { width:700px;height:300px;overflow:hidden;position:relative; }
#target img { position:absolute;top:0;left:0;width:100%;height:100%; }
</style>
</head>
<body>
<div id="target">
<div>
<div><img src="1.jpg"></div>
<div><img src="2.jpg"></div>
<div><img src="3.jpg"></div>
<div><img src="4.jpg"></div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="HappyImage.min.js"></script>
<script>
$( "#target" ).HappyImage();
</script>
</body>
</html>配置
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 容器宽度，可通过 css 设置，可以是 px 或 百分比 | Number / String / null | null |
| height | 容器高度，可通过 css 设置，可以是 px 或 百分比 | Number / String / null | null |
| effect | 轮播图切换效果，可选值：fade / slide | String | slide |
| duration | 轮播图切换动画的过渡时长，单位：ms | Number | 700 |
| defaultIndex | 默认索引 | Number | 0 |
| arrow | 箭头切换器。true 表示使用内置的箭头；false 则不显示箭头；如果传入数组（2个元素）表示使用自定义元素，如：[ "#prev", "#next" ] | Boolean / Array | true |
| dot | 圆点切换器。true 表示使用内置的圆点；false 则不显示圆点；如果传入字符串选择器表示使用自定义圆点控制器，此选择器对应的元素的子元素就是圆点，如："#dot-wrapper" | Boolean / String | true |
| arrowHoverShow | 当鼠标悬浮在目标元素上时，才显示箭头切换器（只对内置箭头有效） | Boolean | false |
| dotAlign | 圆点切换器的对齐方式，可选值：left / center / right | String | center |
| autoplay | 自动播放的时间间隔，单位：ms，设置为 0 则关闭自动播放功能 | Number | 0 |
| onChange | 轮播图切换时执行的回调函数，参数是当前图片的索引 | Function | 空函数 |
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图
讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
myh19970801 0
2020/6/26 10:23:09
自动播放根本用不了
西瓜1
2020/6/26 15:55:15
注意方法，可以自动播放。autoplay:1000
$("#target-1").HappyImage({
effect: "slide",
autoplay: 1000
});
myh199708010
2020/6/26 16:23:16
-
原来要设置1000的，我之前一直设置成1，2，3（以为越小越好），谢谢大佬指导。
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
