WordPress網站制作banner輪播圖的通用方法

使用Wordpress做網站時，制作banner輪播圖也是非常簡單，下面學做網站論壇一下制作banner輪播圖的通用方法。

方法/步驟

1. 下載導航下拉菜單jquery特效基礎包。點擊下載?提取碼: cme9；
2. 將下載的壓縮包解壓出來，將里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二個文件通過FTP工具上傳到自己模板的images文件夾里；
   
3. 在頭部模板header.php里找到 標簽，將下的代碼放到 標簽上面；（注意文件路徑）

   
   <script type="text/javascript"?src="/static/js/jquery1.42.min.js">
   <script type="text/javascript"?src="/static/js/jquery.SuperSlide.2.1.3.js">
   
   

4. 使用以下的代碼替換原來的網站輪播圖代碼。（一般在header.php）

   
   
   ?      
   
   ?        
   1
   2
   3
   4
   ?      
   ?      
   
   ?        
   
   ?          
   <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner01.jpg" />
   ?          
   <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner02.jpg" />
   ?          
   <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner03.jpg" />
   ?          
   <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner04.jpg" />
   ?        
   ?      
   
   ?      
   ?      
   ?      
   
   ?    
   
   ?    
   ?    jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
   ?    
   
   

5. 在CSS文件里添加以下控制輪播圖的CSS樣式代碼。

   
   /* 本例子css */
       .slideBox{ width:980px; height:280px; overflow:hidden; position:relative; border:1px solid #ddd; }
       .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
       .slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
       .slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
       .slideBox .hd ul li.on{ background:#f00; color:#fff; }
       .slideBox .bd{ position:relative; height:100%; z-index:0;  }
       .slideBox .bd li{ zoom:1; vertical-align:middle; }
       .slideBox .bd img{ width:100%; height:100%; display:block; }
   
       /* 下面是前/后按鈕代碼，如果不需要刪除即可 */
       .slideBox .prev,
       .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;  }
       .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
       .slideBox .prev:hover,
       .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
       .slideBox .prevStop{ display:none; }
       .slideBox .nextStop{ display:none; }
   
   

6. 上傳四張輪播圖片，圖片名為分為：banner01.jpg、banner02.jpg、banner03.jpg、banner04.jpg ，放到自己的圖片文件夾里（picture文件夾）；
7. 這樣就成功的制作好了wordpress網站banner輪播圖。