欢迎光临一流素材网,免积分免费素材下载!
AD

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

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8,IE6

其实之前就一直想给大家介绍这款插件了,只是由于没有调对自动播放参数,原来是引用错文件了,今天我就来给大家介绍一下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/5626622843783739c864_z.jpg" alt=""title="Blossoms">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5183/5627213996915aa49939_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编码即可。



具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件