插件描述：采用面向对象的方式开发，利用jquery开发，简单轻便，用户交互比较友好。
使用方法
首先引入css文件和html结构html结构<div class='poster-main carousel' data-setting='{}'>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class='poster-btn poster-prev-btn'></div><ul class='poster-list'> <li class="list-item"> <a href="#"><img src="./image/01.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/02.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/03.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/04.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/05.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/06.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/07.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/08.jpg" alt=""></a> </li> <li class="list-item"> <a href="#"><img src="./image/09.jpg" alt=""></a> </li></ul><div class='poster-btn poster-next-btn'></div></div> |
3.配置参数是通过属性值读取的，在data-setting={}配置相关参数
1 2 3 4 5 6 7 8 9 10 11 | { "width": 1000, //幻灯片的宽度 "height": 270, //幻灯片的高度 "posterWidth": 640, //第一帧的高度 "posterHeight": 270, //第一帧的宽度 "verticalAlign": 'middle', "autoPlay": true, "speed": 500, "delay": 500, "scale": 0.9 //记录显示比例}, |
须严格按照json格式配置。在文件中引入jquery插件和carouse.js,执行如下脚本：
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 可爱的儿童网站_响应式幼儿园网站_电子商务_购物网站HTML5模板
- 下一个特效： 纯js写的祝愿墙