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

 查看演示  website  立即下载

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

使用步骤

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

<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代码

<script>
   $("#slideshow").craftyslide();
</script>

3、在body标签中加入以下格式的html代码

<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>	

参数配置

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

 $("#slideshow").craftyslide({
  'width': 640,//幻灯片宽度
  'height': 400,//幻灯片高度
  'pagination': false,//是否显示导航按钮
  'fadetime': 500,//渐隐时间
  'delay': 5000//切换间隔
});

注意事项

1、本插件可以自行设置图片的高度和宽度，但是你会发现，当你设置的宽度和高度小于图片本身的宽度和高度时，是不会缩放的，而只是显示图片的指定部分，多出部分则不予显示。
2、本插件原始的配置是，如果我们启用导航，就不能自动播放，如果不启用导航，则自动播放。这显然不符合我们的需求。我们是希望既能导航又能自动播放。但官方并未提供这样的功能。于是本站就修改了一下js文件，结果既可以导航也可以自动播放了。但是这里还有一个问题就是，由于没有做相应的处理，自动播放时，导航按钮会停在那儿不动，不会随着幻灯片的播放而激活。
当然这个功能相信官方会发布的，如果有哪位朋友研究出来了，可以在这里分享一下。

3、插件本来是显示的中文，当我们想显示英文图片介绍文字的时候，会发现乱码了，这只需要将html改为utf-8编码即可。

PREVIOUS:
NEXT:
文字菜单特效-BLUR MENU WITH CSS3 TRANSITIONS
大气美观的全屏日历插件-JQUERY VERBOSE CALENDAR