现在位置首页 / 前端开发 /正文

简洁清新的轻量级幻灯片-CRAFTYSLIDE

作者: IT小兵 | 2013年8月22日| 热度:℃ | 评论: |参与:

其实之前就一直想给大家介绍这款插件了,只是由于没有调对自动播放参数,原来是引用错文件了,今天我就来给大家介绍一下Craftyslide。
Craftyslide 是一款轻量级的jquery幻灯片插件,JS文件仅仅只有2KB。之所以会产生这款插件,是因为作者认为大多数jquery幻灯片都比较重量级,里面引用到了很多的js和css文件,而且还有复杂的参数配置和事件。而Craftyslide则只需要做很少的工作,引用很少的文件即可。整个插件简洁清新,相信你一定会喜欢上这个插件的。


插件信息

官网:http://projects.craftedpixelz.co.uk/craftyslide/

Demo:http://projects.craftedpixelz.co.uk/craftyslide/


预览图

幻灯片CRAFTYSLIDE


使用步骤

1、引入以下的js和css文件

1
2
<link rel="stylesheet" href="css/craftyslide.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


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
<div id="slideshow">   
    <ul>       
        <li>
            <imgsrc="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt=""title="Light Trails">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt=""title="Bokeh">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt=""title="Blossoms">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt=""title="Funky Painting">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt=""title="Vintage Chandelier">
        </li>
    </ul>
</div>



参数配置

由于本插件轻量级,所以参数比较少

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编码即可。


下载地址

官方下载:https://github.com/craftedpixelz/Craftyslide/zipball/master
网盘下载:http://pan.baidu.com/share/link?shareid=339214&uk=2166814920


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询