首页>>Jquery图片>>jQuery 几种不同的slide滑动banner，包括自动播放和带缩略图(2013-11-30)

jQuery 几种不同的slide滑动banner，包括自动播放和带缩略图

 本例的上 下项目用的是自定义字体

本例的案例一共有6个，演示页面左侧导航条可以看到

jQuery 几种不同的slide滑动banner，包括自动播放和带缩略图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main" role="main">  
  2.       <section class="slider">  
  3.         <div class="flexslider">  
  4.           <ul class="slides">  
  5.             <li>  
  6.                 <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />  
  7.                 </li>  
  8.                 <li>  
  9.                 <img src="images/kitchen_adventurer_lemon.jpg" />  
  10.                 </li>  
  11.                 <li>  
  12.                 <img src="images/kitchen_adventurer_donut.jpg" />  
  13.                 </li>  
  14.                 <li>  
  15.                 <img src="images/kitchen_adventurer_caramel.jpg" />  
  16.                 </li>  
  17.           </ul>  
  18.         </div>  
  19.       </section>  
  20.       <aside>  
  21.         <div class="cf">  
  22.           <h3>Basic Slider</h3>  
  23.           <ul class="toggle cf">  
  24.             <li class="js"><a href="#view-js">JS</a></li>  
  25.             <li class="html"><a href="#view-html">HTML</a></li>  
  26.           </ul>  
  27.         </div>  
  28.         <div id="view-js" class="code">  
  29.           <pre class="brush: js; toolbar: false; gutter: false;">  
  30.             // Can also be used with $(document).ready()  
  31.             $(window).load(function() {  
  32.               $('.flexslider').flexslider({  
  33.                 animation: "slide"  
  34.               });  
  35.             });  
  36.           </pre>  
  37.         </div>  
  38.         <div id="view-html" class="code">  
  39.           <pre class="brush: xml; toolbar: false; gutter: false;">  
  40.             <!-- Place somewhere in the <body> of your page -->  
  41.             <div class="flexslider">  
  42.               <ul class="slides">  
  43.                 <li>  
  44.                   <img src="slide1.jpg" />  
  45.                 </li>  
  46.                 <li>  
  47.                   <img src="slide2.jpg" />  
  48.                 </li>  
  49.                 <li>  
  50.                   <img src="slide3.jpg" />  
  51.                 </li>  
  52.                 <li>  
  53.                   <img src="slide4.jpg" />  
  54.                 </li>  
  55.               </ul>  
  56.             </div>  
  57.           </pre>  
  58.         </div>  
  59.       </aside>  
  60.     </div>  
  61.   
  62.   </div>  
  63.   <div class="xx">111</div>  
  64.   <!-- jQuery -->  
  65.   <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>  
  66.   
  67.   <!-- FlexSlider -->  
  68.   <script defer src="jquery.flexslider.js"></script>  
  69.   
  70.   <script type="text/javascript">  
  71.     $(function(){  
  72.       SyntaxHighlighter.all();  
  73.     });  
  74.     $(window).load(function(){  
  75.       $('.flexslider').flexslider({  
  76.         animation: "slide",  
  77.         start: function(slider){  
  78.           $('body').removeClass('loading');  
  79.         }  
  80.       });  
  81.     });  
  82.   </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_132.html