jquery幻灯片插件之owl.carousel.js
官网地址:http://owlcarousel2.github.io/OwlCarousel2/
这个插件兼容各种浏览器,以及移动端
使用方法:
1、下载文件,解压以后,把dist里面的文件放到项目中
2、引入jquery文件,必须是1.8以上的
3、页面引入的文件:
<link rel="stylesheet" href="./js/vendor/OwlCarousel2-2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2-2.2.1/assets/owl.theme.default.min.css">
<script src="js/vendor/jquery-3.1.1.js"></script>
<script src="js/vendor/OwlCarousel2-2.2.1/owl.carousel.min.js"></script>
4、页面代码:
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width: 50em)">
<source srcset="img/ad002-m.png" media="(min-width: 30em)">
<img srcset="img/ad002.png" alt="新年红包">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width: 50em)">
<source srcset="img/ad003-m.png" media="(min-width: 30em)">
<img srcset="img/ad003.png" alt="新手秘籍">
</picture>
</div>
</div>
jquery幻灯片插件之owl.carousel.js的更多相关文章
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- jQuery幻灯片插件Owl Carousel
简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- lightslider-支持移动触摸的轻量级jQuery幻灯片插件
插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- bootstrap插件学习-bootstrap.carousel.js
先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...
- jQuery幻灯片插件autoPic
原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!
随机推荐
- c# Bitmap byte[] Stream 文件相互转换
//byte[] 转图片 publicstatic Bitmap BytesToBitmap(byte[] Bytes) { MemoryStream stream = null; try { str ...
- 何谓SQL Server参数嗅探
大家听到"嗅探"这个词应该会觉得跟黑客肯定有关系吧,使用工具嗅探一下参数,然后截获,脱裤o(∩_∩)o . 事实上,我觉得大家太敏感了,其实这篇文章跟数据库安全没有什么关系,实际上 ...
- Scala进阶之路-idea下进行spark编程
Scala进阶之路-idea下进行spark编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1>.创建新模块并添加maven依赖 <?xml version=&qu ...
- Linux操作系统原理
Linux操作系统原理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.计算机经历的四个时代 1.第一代: 真空管计算机,输入和输出:穿孔卡片,对计算机操作起来非常不便,做一件事 ...
- mysql数据库中case when 的用法
场景1:比如说我们在数据库存了性别的字段,一般都是存0 和 1 代表男和女 然后我们会得到0和1之后在java中判断 ,很麻烦有么有?其实我们完全可以在sql中判断好之后拿来现成的.就是在sql中 ...
- mac下chrome快捷键
打开开发者工具:alt + command + I: 打开“JavaScript 控制台”:⌘-Option-J: 打开当前网页的源代码:⌘-Option-U: 刷新页面:command + R: m ...
- Linux记录-CentOS配置Docker
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...
- C#获取Html中的图片元素路径
使用Ueditor的时候把文章以HTML标签的方式存在数据库中,同时还要将文章的第一张图片的路径一并存入数据库,所以就需要在Html中获取第一个图片的路径,没有图片的话设置一个默认的图片.代码如下: ...
- jaxp实现对xml文档的增,删,改,查操作(附源码)浅析
jaxp,属于javase中的一部分.是对xml进行解析的一个工具类: 既然说到这里,还是讲全一点,讲讲上面说到的xml的解析技术. xml的一个标记型文档. 在html的层级结构中,它会在内存中分配 ...
- c/s 给 服务器上传文件(c/s和b/s互传文件)
//c/s 代码 private void button1_Click(object sender, EventArgs e) { OpenFileDialog openFileDialog = ne ...