WordPress网站制作banner轮播图的通用方法

使用WordPress做网站时，制作banner轮播图也是最简单，下面学做网站论坛一下制作banner轮播图的通用方法。

方法/步骤

1. 下载网站特效功能万能JS插件包；
2. 将下载的压缩包解压出来，将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里；
   
3. 在头部模板header.php里找到</head> 标签，将下的代码放到</head> 标签上面；（注意文件路径）

   
   <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
   
   <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
   
   

4. 使用以下的代码替换原来的网站轮播图代码。（一般在header.php）

   
   <div id="slideBox" class="slideBox">
   
               <div class="hd">
   
                   <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
   
               </div>
   
               <div class="bd">
   
                   <ul>
   
                       <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner01.jpg" /></a></li>
   
                       <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner02.jpg" /></a></li>
   
                       <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner03.jpg" /></a></li>
   
                       <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner04.jpg" /></a></li>
   
                   </ul>
   
               </div>
   
   
   
               <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
   
               <a class="prev" href="javascript:void(0)"></a>
   
               <a class="next" href="javascript:void(0)"></a>
   
   
   
           </div>
   
   
   
           <script type="text/javascript">
   
           jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
   
           </script>
   
   

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轮播图。