19-7 Superslides 輪播

官網：http://archive.nicinabox.com/superslides/

範例：

適合圖片直接輪播，不需輸入文字及連結

1. 引入CSS
    

   
     <link rel="stylesheet" href="css/superslides.css">

   
    

2. 引入JS
    

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="javascripts/jquery.easing.1.3.js"></script>
     <script src="javascripts/jquery.animate-enhanced.min.js"></script>
     <script src="javascripts/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>

   
    

3. SCRIPT
    

   
     <script>
       $('#slides').superslides({
         animation: 'fade'
       });
     </script>

    

4. HTML
    

   
     <div id="slides">
       <div class="slides-container">
         <img src="images/people.jpeg" alt="Cinelli">
         <img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
         <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
         <img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
       </div>
   
       <nav class="slides-navigation">
         <a href="#" class="next">Next</a>
         <a href="#" class="prev">Previous</a>
       </nav>
     </div>