Jquery图片导航焦点图特效（点击小图看大图）

今天介绍一个Jquery图片导航焦点图特效，这种特效在很多网站上都使用到，特别一些大型网站上面也会经常使用到这种Jquery图片导航焦点图特效。

这种Jquery图片导航焦点图特效由二部分组成，上面是大图，下面是小图，当点击小图时，上面就会显示到相应的大图，实现点击小图看大图的效果。

制作方法

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. 在需要显示这种焦点图的位置，放上以下的代码：

   
   <div class="picFocus">
   
   <div class="bd">
   
   <ul>
   
   <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic1.jpg" /></a></li>
   
   <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic2.jpg" /></a></li>
   
   <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic3.jpg" /></a></li>
   
   <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic4.jpg" /></a></li>
   
   </ul>
   
   </div>
   
   
   
   <div class="hd">
   
   <ul>
   
   <li><img src="images/pic1.jpg" /></li>
   
   <li><img src="images/pic2.jpg" /></li>
   
   <li><img src="images/pic3.jpg" /></li>
   
   <li><img src="images/pic4.jpg" /></li>
   
   </ul>
   
   </div>
   
   
   
   </div>
   
   <script type="text/javascript">jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</script>
   
   

5. 在CSS3样式文件里放上以下的样式代码，用于控制焦点图的样式。

   
   /* 本例子css */
   
   .picFocus{ margin:0 auto; width:467px; border:1px solid #ccc; padding:5px; position:relative; overflow:hidden; zoom:1; }
   
   .picFocus .hd{ width:100%; padding-top:5px; overflow:hidden; }
   
   .picFocus .hd ul{ margin-right:-5px; overflow:hidden; zoom:1; }
   
   .picFocus .hd ul li{ padding-top:5px; float:left; text-align:center; }
   
   .picFocus .hd ul li img{ width:109px; height:65px; border:2px solid #ddd; cursor:pointer; margin-right:5px; }
   
   .picFocus .hd ul li.on{ background:url("images/icoUp.gif") no-repeat center 0; }
   
   .picFocus .hd ul li.on img{ border-color:#f60; }
   
   .picFocus .bd li{ vertical-align:middle; }
   
   .picFocus .bd img{ width:467px; height:230px; display:block; }