使用jquery.skitter.js制作漂亮的轮播图效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

关于jquery.skitter.js

skitter.js 是一个免费的 幻灯片插件，具有多种动画和选项。该插件提供了许多可配置的参数和方法，具有很强的定制功能。该插件提供了以页码列表或是缩略图列表的方式显示，也可以使用按钮控制浏览图片。 此插件已经不是淡入淡出那么简单的效果了，它在翻页或滑动时有非常多的动画效果，比如立方体形、管道形等等。 skitter.js 可以同时设置使用多种换页效果。

关键代码

<script type="text/javascript">
    $(document).ready(function () {
        $('.skitter-large').skitter({
            theme: 'clean', //主题
            navigation: true, //表示是否显示“前一个”和“后一个”按钮。如果设置为true，则会在幻灯片两侧显示翻页按钮‌
            interval: 5000, //表示切换速度，时间毫秒值
            numbers: true, //表示是否显示数字编号列表。
            dots: false //表示是否显示点状导航。
        });

        $(".skitter-large .prev_button,.skitter-large .next_button").hover(function () {
            $(this).addClass("hover");
        }, function () {
            $(this).removeClass("hover");
        })
    });
</script>

参数说明

  • numbers‌: 类型为bool型，表示是否显示数字编号列表。如果设置为true，则会在幻灯片下方显示数字编号，用于指示当前图片的位置‌

  • numbers_align‌: 表示数字编号的对齐方式，如“center”（居中）

  • ‌dots‌: 类型为bool型，表示是否显示点状导航（即小圆点导航）。如果设置为true，则会在幻灯片下方显示一系列小圆点，用于指示当前图片的位置‌

  • fullscreen‌: 类型为bool型，表示是否全屏显示幻灯片‌

  • ‌focus‌: 类型为bool型，表示是否在幻灯片中间显示一个小圆焦点，点击该焦点会使幻灯片居中显示‌

  • controls‌: 类型为bool型，表示是否显示控制按钮，如播放/暂停按钮‌

  • progressbar‌: 类型为bool型，表示是否显示进度条‌

  • mouseOverButton: 类型为function，表示鼠标移到控制按钮上做的事情

  • mouseOutButton: 类型为function，表示鼠标从控制按钮移开要做的事情

  • numbers:类型为bool型，表示是否显示数字编号列表，如果你有3张图片，则会出现”1 2 3“这样的字样

  • animation: 类型为字符串，表示动画类型，这个有很多，可以去看参考文档，默认为空或者a标签的class值，我一般设置为'random',表示随机

  • thumb_width: 碎片宽度，像素值

  • thumb_height: 碎片高度，像素值，这两个值越小，动画越细碎

  • interval:切换速度，时间毫秒值

  • navigation:bool型，表示是否显示prev，next按钮

  • structure:结构代码（html代码），这个插件会将你的ul li img代码隐藏，用结构代码来构造显示