Owl Carousel强大的响应式jQuery焦点图轮播插件

轮播图 焦点图 幻灯片 2014-10-22

控件介绍
Owl Carousel是一款强大的响应式jQuery焦点图轮播插件。Owl Carousel集成了许多功能,如支持触摸屏,图片懒加载,各种css3切换效果,json数据,随机排列图片等,并且这些功能都是可以定制的。
浏览器兼容

支持IE9+

演示下载 3755
使用方法

引入必要的js文件和css文件

1
2
3
4
5
6
7
8
9
10
11
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
  
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
  
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
  
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>            

HTML结构

使用Owl Carousel焦点图插件只需要创建一个div,给它一个特定的classowl-carousel既可。

1
2
3
4
5
6
7
8
9
10
<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

更多信息:http://owlgraphic.com/owlcarousel/

本文转载请注明出处:http://www.zhuiye.com/detail_1113.html