Owl Carousel是非常强大的jQuery焦点图插件，这个焦点图插件功能众多，高度可定制性，支持触摸设备，并且是响应式的。

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

<!-- 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既可。

<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/

在线预览    源码下载