owl Carousel 延迟加载图片滚动效果 支持触屏支持手机效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用owl.carousel.js制作jQuery响应式旋转木马效果,本案例支持owl Carousel 延迟加载图片滚动效果 支持触屏手机效果

Owl Carousel 可以让你创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，有丰富的参数设置，甚至可以嵌入视频，功能十分强大。

相比其他插件 owl Carousel更兼容其他浏览器，几乎可以满足你的所有要求。

OWL Carousel 主要功能

  • 响应式设计。支持各种屏幕、触屏。支持div、图片等。支持全部显示、单个显示

  • 支持触屏。经过测试，在android手机的主流浏览器：QQ、百度、UC、微信内置浏览器等支持

  • 文件小，css+js压缩之后不到10k

  • 简洁代码，使用方便

  • 丰富的参数设置，甚至可以嵌入视频，功能十分强大。

  • 浏览器兼容：兼容所有浏览器，包括 IE6、IE7。

手机效果.jpg
手机效果

实现步骤

  • 首先要引用必须的js文件：jquery.min.js、owl.carousel.js

  • 书写html代码，css样式。

  • owl.carousel.js插件初始化 ，初始化可以根据id，也可以根据类名

关键代码与说明

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/owl.carousel.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //根据id初始化owlCarousel
        $("#owl-demo").owlCarousel({
            //幻灯片每页可见个数
            items: 4,
            //是否延迟加载图片。data-src为图片地址。如果元素不是<img>会设置为元素的内联背景图像。
            lazyLoad: true,
            //是否显示上一个和下一个按钮。
            navigation: true,
            //自动播放
            autoPlay: true
        });

    });
</script>

参数说明

Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。

  • items 整数5幻灯片每页可见个数

  • itemsDesktop 数组[1199,4]设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false

  • itemsDesktopSmall 数组[979,3]同上

  • itemsTablet 数组[768,2]同上

  • itemsTabletSmall 数组false同上，默认为 false

  • itemsMobile 数组[479,1]同上

  • itemsCustom 数组false

  • singleItem 布尔值false是否只显示一张

  • itemsScaleUp 布尔值false

  • slideSpeed 整数200幻灯片切换速度，以毫秒为单位

  • paginationSpeed 整数800分页切换速度，以毫秒为单位

  • rewindSpeed 整数1000重回速度，以毫秒为单位

  • autoPlay 布尔值/整数false自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次

  • stopOnHover 布尔值false鼠标悬停停止自动播放

  • navigation 布尔值false显示“上一个”、“下一个”

  • navigationText 数组[“prev”,”next”]设置“上一个”、“下一个”文字，默认是[“prev”,”next”]

  • rewindNav 布尔值true滑动到第一个

  • scrollPerPage 布尔值false每页滚动而不是每个项目滚动

  • pagination 布尔值true显示分页

  • paginationNumbers 布尔值false分页按钮显示数字

  • responsive 布尔值true

  • responsiveRefreshRate 整数200每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式

  • responsiveBaseWidthjQuery 选择器window

  • baseClass 字符串owl-carousel添加 CSS，如果不需要，最好不要使用

  • theme 字符串owl-theme主题样式，可以自行添加以符合你的要求

  • lazyLoad 布尔值false延迟加载

  • lazyFollow 布尔值true当使用分页时，如果跨页浏览，将不加载跳过页面的图片，只加载所要显示页面的图片，如果设置为 false，则会加载跳过页面的图片。这是 lazyLoad 的子选项

  • lazyEffect 布尔值/字符串fade延迟加载图片的显示效果，默认以 400 毫秒淡入，若为 false 则不使用效果

  • autoHeight 布尔值false自动使用高度

  • jsonPath 字符串falseJSON 文件路径

  • jsonSuccess 函数false处理自定义 JSON 格式的函数

  • dragBeforeAnimFinish 布尔值true忽略过度是否完成（只限拖动）

  • mouseDrag 布尔值true关闭/开启鼠标事件

  • touchDrag 布尔值true关闭/开启触摸事件

  • addClassActive 布尔值false给可见的项目加入 “active” 类

  • transitionStyle 字符串false添加 CSS3 过度效果

回调函数

  • beforeUpdate 函数 false 响应之后的回调函数

  • afterUpdate 函数 false 响应之前的回调函数

  • beforeInit 函数 false 初始化之前的回调函数

  • afterInit 函数 false 初始化之后的回调函数

  • beforeMove 函数 false 移动之前的回调函数

  • afterMove 函数 false 移动之后的回调函数

  • afterAction 函数 false 初始化之后的回调函数

  • startDragging 函数 false 拖动的回调函数

  • afterLazyLoad 函数 false 延迟加载之后的回调函数