其实之前就一直想给大家介绍这款插件了，只是由于没有调对自动播放参数，原来是引用错文件了，今天我就来给大家介绍一下Craftyslide。
Craftyslide 是一款轻量级的jquery幻灯片插件，JS文件仅仅只有2KB。之所以会产生这款插件，是因为作者认为大多数jquery幻灯片都比较重量级，里面引用到了很多的js和css文件，而且还有复杂的参数配置和事件。而Craftyslide则只需要做很少的工作，引用很少的文件即可。整个插件简洁清新，相信你一定会喜欢上这个插件的。
使用步骤
1、引入以下的js和css文件
1 2 | <link rel="stylesheet" href="css/craftyslide.css"> |
2、在head标签中加入以下js代码
1 2 3 | <script> $("#slideshow").craftyslide();</script> |
3、在body标签中加入以下格式的html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
参数配置
由于本插件轻量级，所以参数比较少
1 2 3 4 5 6 7 | $("#slideshow").craftyslide({ 'width': 640,//幻灯片宽度 'height': 400,//幻灯片高度 'pagination': false,//是否显示导航按钮 'fadetime': 500,//渐隐时间 'delay': 5000//切换间隔}); |
注意事项
1、本插件可以自行设置图片的高度和宽度，但是你会发现，当你设置的宽度和高度小于图片本身的宽度和高度时，是不会缩放的，而只是显示图片的指定部分，多出部分则不予显示。
2、本插件原始的配置是，如果我们启用导航，就不能自动播放，如果不启用导航，则自动播放。这显然不符合我们的需求。我们是希望既能导航又能自动播放。但官方并未提供这样的功能。于是本站就修改了一下js文件，结果既可以导航也可以自动播放了。但是这里还有一个问题就是，由于没有做相应的处理，自动播放时，导航按钮会停在那儿不动，不会随着幻灯片的播放而激活。
当然这个功能相信官方会发布的，如果有哪位朋友研究出来了，可以在这里分享一下。
3、插件本来是显示的中文，当我们想显示英文图片介绍文字的时候，会发现乱码了，这只需要将html改为utf-8编码即可。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com