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

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

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

更优秀的升级版 owl.carousel2:https://www.16css.com/js/show/1008.html


这是一款基于owl.carousel.js和jquery-1.9.1.min.js实现的响应式左右滚动代码,自适应屏幕大小,响应式设计,完美兼容PC端和手机移动设备,支持触屏滑动效果,支持点击按钮切换,有“上一张、下一张”按钮链接,可设置一屏显示的图片个数,兼容各大主流浏览器!

1、引入文件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2、HTML

<div id="owl-demo" class="owl-carousel">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

3、JavaScript

$(function(){
    $('#owl-example').owlCarousel();
});

参数

参数   类型   默认值   说明
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 延迟加载之后的回调函数


自定义事件

事件 说明

owl.prev 到上一个

owl.next 到下一个

owl.play 自动播放,可传递一个参数作为播放速度

owl.stop 停止自动播放

owl.goTo 跳到第几个

owl.jumpTo 不使用动画跳到第几个



扩展

两行滚动方法:

https://www.16css.com/jiaocheng/show/1144.html


代码下载
本地下载
收藏 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轮播图-幻灯片插件