使用jquery.slides.js制作带有缩略图的幻灯片效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用slides.jquery.js制作带有缩略图的幻灯片效果，原理就是将轮播图分页器换成缩略图小图片。

使用方法：

引用jquery文件和slides.jquery.js文件

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="js/slides.jquery.js" type="text/javascript"></script>

slides 初始化

<script type="text/javascript">
    $(function () {
        $('#slides').slides({
            container: 'slides_container',
            preload: true,
            play: 4000,
            pause: 1500,
            hoverPause: true,
            effect: 'fade',
            slideSpeed: 850
        });
    }); 
</script>

更多配置参数

  • preload: true, // boolean, 是否显示预加载图片 loading.gif

  • preloadImage: 'images/loading.gif', // string, 预加载图片路径 "/img/loading.gif"

  • container: 'slides_container', // string, 放置图片层的顶级div 样式名称

  • next: 'next', // string, 下一个按钮样式名

  • prev: 'prev', // string, 上一个按钮样式名

  • pagination: true, // boolean, 是否添加轮播图分页器 就是下面的小点点

  • generatePagination: true, // boolean, 是否自动生成分页器

  • paginationClass: 'pagination', // string, 分页器样式名称

  • fadeSpeed: 850, // number, 淡入淡出动画的速度 单位为毫秒

  • slideSpeed: 850, // number, 设置幻灯片滑动的毫秒时间

  • start: 1, // number, 设置从第几张幻灯片开始

  • effect: 'slide', // string,设置幻灯片next/prev切换和分页切换方式的效果 'slide, fade'

  • crossfade: false, // boolean, 设置幻灯片的淡入淡出效果

  • randomize: false, // boolean, 是否随机切换效果

  • play: 0, // number, 自动播放切换幻灯的时间间隔

  • pause: 0, // number, 点击 next/prev或分页按钮后暂停多少毫秒才切换图片

  • hoverPause: false, // boolean, 当鼠标移动到图片上的时候，幻灯片切换是否暂停

  • autoHeight: false, // boolean, 是否自动调整高度

  • autoHeightSpeed: 350, // number, 设置自动调整高度的时间毫秒数

  • bigTarget: false // boolean, 控制滑块是否可以超出设定的范围