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 欢迎批评指正!
随机推荐
- 在exe运行界面按右键(不用按鼠标右键)
单击该键 用于夜晚在exe运行界面粘贴数据.(正常来说直接按右键即可) 从此粘贴数据不会影响睡觉的人……etc.在宿舍……
- 求解100以内的所有素数(问题来自PythonTip)
求解100以内的所有素数 (AC/Submit)Ratio(4615|22542)20.47% 描述: 输出100以内的所有素数,素数之间以一个空格区分(注意,最后一个数字之后不能有空格). a=[2 ...
- Java_myBatis_XML代理_延迟加载
使用mybatis的延迟加载,需要两个步骤: 1.在全局配置文件中添加一下语句(lazyLoadingEnabled默认为false,aggressiveLazyLoading默认为true) < ...
- 面向对象【day08】:反射(五)
本节内容 概述 反射函数 综合使用 一.概述 反射我们以后会经常用到,这个东西实现了动态的装配,通过字符串来反射类中的属性和方法 二.反射函数 2.1 hasarttr(obj,name_str) 作 ...
- iframe伪造ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- golang基础数据结构链表
链表 链表(Linked list),是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer). 每个节点包含下一个节点的地址,这样把所有的节点串起来了, ...
- 动态生成js数据Response.Expires=1440竟然无效?
项目当中有一些数据,比如多语言翻译,要求做语言包,起初当然是做成i18n.js文件,但是每个阶段版本更新都会增加一些key,那么发布的时候只能给<script>的src增加?2018091 ...
- Java面试题系列(三)Java new一个对象的过程中发生了什么
Person class Person{ private String name; private int age; public Person() { super(); } public Perso ...
- readline.c
一.第一版 #include <unistd.h> #include <errno.h> ssize_t readline(int fd, void *vptr, size_t ...
- java实现网页验证码
Servlet: package cn.bdqn.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletExceptio ...