几句代码写出一个内容轮播器(jQuery插件的神奇)jQuery.flexslider.js登场!!

来源:互联网 发布:php中= 编辑:程序博客网 时间:2021/10/28 22:47

step 1:导入css样式

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <link href="css/flexslider.css" rel="stylesheet" type="text/css"/>//引入flexslider的css样式表  

step 2:构建轮播器

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //轮播器start  
  2.     <div class="flexslider">//必须引用的flexslider类  
  3.         <ul class="slides">//必须引用的slides类  
  4.             <li><a href="#"><img src="images/calrousel1.jpg"></a></li>  
  5.             <li><a href="#"><img src="images/calrousel2.jpg"></a></li>  
  6.             <li><a href="#"><img src="images/calrousel3.jpg"></a></li>  
  7.             <li><a href="#"><img src="images/calrousel4.jpg"></a></li>  
  8.             <li><a href="#"><img src="images/calrousel5.jpg"></a></li>  
  9.         </ul>  
  10.     </div>  
  11. //轮播器end  

step3:导入jQuery 和flexslider核心js

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <script src="js/jQuery.1.7.1.min.js"></script>//导入jQuery核心js  
  2. <script src="js/jquery.flexslider.js"></script>//导入flexslides核心js  

最后一步:启动轮播器

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <script>  
  2.     $('document').ready(function(){  
  3.         //最后一步启动轮播器  
  4.         $('.flexslider').flexslider();  
  5.     });  
  6. </script>  
0 0