当前位置:主页 > jquery插件 > 轮播图 >

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

栏目分类:轮播图   模板编号:JQ00006    发布日期:2017-01-21   来源:网络   浏览次数:次     在线预览
插件描述:其实之前就一直想给大家介绍这款插件了,只是由于没有调对自动播放参数,原来是引用错文件了,今天我就来给大家介绍一下Craftyslide。

其实之前就一直想给大家介绍这款插件了,只是由于没有调对自动播放参数,原来是引用错文件了,今天我就来给大家介绍一下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>
      <img src="http://www.zybox.cc/6a_z.jpg" alt="" title="Light Trails">
    </li>
    <li>
       <img src="http://www.zybox.cc/d6_z.jpg" alt="" title="Bokeh">
    </li>
    <li>
      <img src="http://www.zybox.cc/64_z.jpg" alt="" title="Blossoms">
    </li>
    <li>
      <img src="http://www.zybox.cc/39_z.jpg" alt="" title="Funky Painting">
    </li>
    <li>
      <img src="http://www.zybox.cc/29_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编码即可。


在线演示 立即下载
打赏本站
云盘密码:luoo
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载