{求助}带焦点图的幻灯片求改进

这是我现在的幻灯片效果
file:///d:/program files/360浏览器/360se6/User Data/Temp/forum.php?mod=image&aid=1413886&size=300x300&key=4ec7512f0b77c1be&nocache=yes&type=fixnone file:///d:/program files/360浏览器/360se6/User Data/Temp/forum.php?mod=image&aid=1413886&size=300x300&key=4ec7512f0b77c1be&nocache=yes&type=fixnone
但是这样只显示三张图片,我想 实现用户点击上一组,或下一组,出现另外的三张图片,请问这个该如何改进?
目前的代码如下;

1. <style type="text/css">
   
2. .zhj_bignews { width:330px; height:415px; background-color: #bb9b6c; float:left; }
   
3. .zhj_picbox { background-color: #bb9b6c;  width:330px; height:330px; }
   
4. .zhj_thumb img{ margin:5px 3px 5px 3px; border:1px solid #ffffff;  float:left; cursor:pointer;  opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }
   
5. .zhj_thumb .on{ border:3px solid #4899e8 ; width:72px; height:72px; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/
   
6. .zhj_ws_op { position:relative; left:5; top:-108px; margin-left: 8px;  width:330px; height:50px; color:#FFF; overflow:hidden; }/*字幕区定义*/
   
7. .zhj_ws_opdiv { position:relative; left:0; top:-58px; width:330px; height:58px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*标题区背景 透明度50%*/
   
8. .zhj_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; color:#FFFF00;}/*文章标题样式*/
   
9. .zhj_ws_op h2 a:hover { text-decoration:none;  }/*文章标题鼠标经过样式*/
   
10. 
    
11. </style>
    
12. 
    
13. <div class="zhj_bignews slidebox">
    
14.     <ul class="zhj_picbox slideshow">
    
15.         [loop]
    
16.        <div style="">
    
17.            <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
    
18.            <div class="zhj_ws_opdiv"></div>
    
19.            <div class="zhj_ws_op">
    
20.              <ul>
    
21.               <li>
    
22.                <h2><a href="{url}"{target}>{title}</a></h2>
    
23.                <p><span style="font-size: 12px">{summary}</span></p>
    
24.               </li>
    
25.              </ul>
    
26.            </div>
    
27.           </div>
    
28.         [/loop]
    
29.     </ul>
    
30.     <div class="slidebtns">
    
31.         <em class="slidebarup" style="padding-left:10px; padding-bottom:10px; float:left; cursor: pointer;"> <img src="template/eis_free/eis/left.png" /></em>
    
32.         
    
33.         <span class="zhj_thumb slidebar">
    
34.             [loop1]
    
35.                  <img src="{pic}" width="70" height="70"  />
    
36.             [/loop1]   
    
37.         </span>
    
38.         <em class="slidebardown" style="padding-bottom:10px; float:left; cursor: pointer;"> <img src="template/eis_free/eis/right.png" /></em>
    
39.     </div>
    
40. </div>
    
41. <script type="text/javascript">
    
42. runslideshow();
    
43. </script>
    

复制代码

为了看到和我一样的效果,DIY时请f设置缩略图宽度为300px,高度为300px: