chenssy
致力打造Java精品博客站点

jQuery响应式图片轮播展示插件,slides.js

图片轮播对于Web而言,那实在是最正常不过的展示了。一个好的图片轮播插件除了要有功能强大的图片切换之外,还需要使用简单,配置强大。下面LZ为大家介绍一款功能强大的jQuery响应式图片轮播展示插件:slides.js。他拥有触摸和CSS3动画过渡的特性。

      概述特性:

      1.响应式。能够动态创建出适合任何一种屏幕的图片展示效果。

      2.触摸。能够支持触摸手势以便在移动设备上进行图片的切换的功能。

      3.CSS3过渡效果。动画能够平滑的运行在现代设备上。

      4.安装简便。在例子上进行简易的操作便能实现自己想要的效果。

同时Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项。

用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片。它附带充分的说明和示例。

2013060300001

效果演示:http://slidesjs.com/

插件下载:http://slidesjs.com/downloads/slides.zip

使用方法:

HTML代码结构

<div id="slides">
    <img src="test1.jpg" />
    <img src="test1.jpg" />
    <img src="test1.jpg" />
    <img src="test1.jpg" />
    <img src="test1.jpg" />
</div>

CSS代码

<style type="text/css" media="screen">  
  #slides {  
    width:470px;  
    height:170px;  
  }  
</style>

初始化JS代码

<script>  
      $(function(){  
        $("#slides").slidesjs();  
      });  
</script>

 

官方文档解释

preload(boolean)

当参数设置为 true 的时候,表示在加载相册中照片的过程中显示 加载图片,设置为false的时候则表示不显示  加载图片,默认值为:FALSE

$(function(){  
      $("#slides").slidesjs({  
        preload: true  
      });  
    });
 
preloadImage(string)

这个属性一般跟上一个 preload(boolean) 一起使用,string内的值表示需要显示的 加载图片 的 路径地址。默认值为:“/img/loading.gif”

$(function(){  
      $("#slides").slidesjs({  
        preload: true,  
        preloadImage: '/img/loading.gif'  
      });  
    });
 
container(string)

设置放置图片层的顶级div  样式名称。默认值为:”slides_container”

$(function(){  
      $("#slides").slidesjs({  
        container: 'slides_container'  
      });  
    });

 

generateNextPrev(boolean)

设置 是否自动生成 上一个  下一个 按钮。默认值为:false

$(function(){  
      $("#slides").slidesjs({  
        generateNextPrev: true  
      });  
    });

 

next(string)

自动生成的下一个按钮 样式名称。默认值为:”next”

$(function(){  
      $("#slides").slidesjs({  
        next: 'next'  
      });  
    });

 

prev(string)

自动生成的上一个按钮 样式名称。默认值为: “prev”。

$(function(){  
  $("#slides").slidesjs({  
    prev: 'prev'  
  });  
});
 
pagination(boolean)

如果你不使用分页的方式显示图片你可以设置为false ,但是没有必要,推荐不做设置

$(function(){  
      $("#slides").slidesjs({  
        pagination: true  
      });  
    });

 

generatePagination(boolean)

设置 是否自动生成分页导航层。默认值为:true

$(function(){  
      $("#slides").slidesjs({  
        generatePagination: true  
      });  
    });

 

paginationClass(string)

设置分页导航层的 样式名称。默认值为:”pagination”

$(function(){  
      $("#slides").slidesjs({  
        paginationClass: 'pagination'  
      });  
    });

 

currentClass(string)

设置分页导航层中 当前分页项目的样式名称。默认值为:”current”

$(function(){  
      $("#slides").slidesjs({  
        currentClass: 'current'  
      });  
    });

 

注意:上面的各种配置是可以统一起来的。O(∩_∩)O~  ~~~~。如:

$('#slides').slidesjs({
        width: 1001,
        height: 400,
        pagination: {
            active: true,
            effect: "slide"
        },
        play: {
            active: true,
            interval: 3000,
            auto: true,
            swap: false,
            pauseOnHover:true,
            effect: "slide"
        }
    });

如未加特殊说明,此网站文章均为原创,转载必须注明出处。cmsblogs-chenssy » jQuery响应式图片轮播展示插件,slides.js

分享到:更多 ()
    • 这个没有去研究过!不过slides.js功能已经非常强大了,同时我已经改造了,是的配置更加简单,更加强大

    • 这个需要改源码!通过源码来进行判断。大概思路如下:
      1.将轮播的代码整理出来,封装为一个函数
      2.获取图片数量。size > 1 执行轮播,否则不执行轮播。、

Chenssy's Blog | 致力打造个人精品博客

联系作者