夏日博客

A-A+

jQuery响应式内容图片滑动插件jquery.bxslider.js

2016年01月07日 前端设计 暂无评论 阅读 9 views 次

jquery.bxslider.js是基于jquery的一个响应式图片滑动插件了，我们可以使用它来做一个焦点图功能，下面整了一个简单例子，大家一起来参考。

安装插件,代码如下:

  1. <!-- jQuery library (served from Google) -->  
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
  3. <!-- bxSlider Javascript file -->  
  4. <script src="/js/jquery.bxslider.min.js"></script>  
  5. <!-- bxSlider CSS file -->  
  6. <link href="/lib/jquery.bxslider.css" rel="stylesheet" />  

HTML结构,代码如下:

  1. <ul class="bxslider">  
  2.   <li><img src="/images/pic1.jpg" /></li>  
  3.   <li><img src="/images/pic2.jpg" /></li>  
  4.   <li><img src="/images/pic3.jpg" /></li>  
  5.   <li><img src="/images/pic4.jpg" /></li>  
  6. </ul>  

调用插件:

  1. $(document).ready(function(){  
  2.   $('.bxslider').bxSlider();  
  3. });  

例子,代码如下:

  1. JS:  
  2. $('.bxslider').bxSlider({  
  3.   mode: 'fade',  
  4.   captions: true  
  5. });  
  6. HTML:  
  7. <ul class="bxslider">  
  8.   <li><img src="/images/730_200/tree_root.jpg" title="Funky roots" /></li>  
  9.   <li><img src="/images/730_200/hill_road.jpg" title="The long and winding road" /></li>  
  10.   <li><img src="/images/730_200/trees.jpg" title="Happy trees" /></li>  
  11. </ul>  

例子,自动播放,代码如下:

  1. JS:  
  2. $('.bxslider').bxSlider({  
  3.   auto: true,  
  4.   autoControls: true  
  5. });  
  6. HTML:  
  7. <ul class="bxslider">  
  8.   <li><img src="/images/730_200/hill_trees.jpg" /></li>  
  9.   <li><img src="/images/730_200/me_trees.jpg" /></li>  
  10.   <li><img src="/images/730_200/houses.jpg" /></li>  
  11. </ul>  
标签：

给我留言