不需js，diy幻灯效果综合篇

最近研究了本站的一些关于幻灯的帖子，颇有心得，修正了一些错误，经过我测试，完美运行，共整理了五种效果。本想设置回复帖子才能浏览本帖内容，却怎么也找不到选项，先放一个吧。其他的以后再放。
先看图：

注意在diy设置的时候，需要设置幻灯的宽度为350px，高度330px。

1. <style>
   
2. .bi_ws { float:left; width:350px; height:330px; background-color:#999999; overflow:hidden; }/*幻灯片的整体大小*/
   
3. .pi_cx { display:inline; position:relative; float:left; width:337px; height:258px; overflow:hidden; margin:6px 0 3px 6px; }/*大图片区域样式*/
   
4. .pi_cx div img { width:337px; height:258px; }/*大图片的大小*/
   
5. .bi_ws_op { margin-left: 8px;  position:absolute; left:5; bottom:0px; width:322px; height:70px; color:#FFF;  }/*字幕区定义*/
   
6. .bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:337px; height:78px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*标题区背景 透明度50%*/
   
7. .bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; }/*文章标题样式*/
   
8. .bi_ws_op h2 a:hover { text-decoration:underline; color:#FF9300; }/*文章标题鼠标经过样式*/
   
9. .bi_ws_btn { width:344px; height:60px; float:left;margin-left:6px; }/*下侧缩略图区域样式*/
   
10. .bi_ws_btn div { float:left; width:86px; height:60px; cursor:pointer;  margin:1px 0px 1px 0px ; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }/*下侧缩略图区域中每个缩略图区域样式*/
    
11. .bi_ws_btn img { width:80px; height:54px; margin:0px; border:1px solid #ffffff; }/*缩略图样式（非焦点缩略图）*/
    
12. .bi_ws .bi_ws_btn .on{ background:url(/forum/static/image/common/1-1.png) no-repeat 0 0; width:86px; height:60px;  opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/
    
13. 
    
14. </style>
    
15. <div class=" bi_ws slidebox">
    
16.     <div class="pi_cx slideshow">
    
17.     [loop]
    
18.       <div>
    
19.        <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
    
20.        <div class="bi_ws_opdiv"></div>
    
21.        <div class="bi_ws_op">
    
22.          <ul>
    
23.           <li>
    
24.            <h2><a href="{url}"{target}>{title}</a></h2>
    
25.            <p><span style="font-size: 12px">{summary}</span></p>
    
26.           </li>
    
27.          </ul>
    
28.        </div>
    
29.       </div>
    
30.     [/loop]
    
31.     </div>
    
32.     <div class="bi_ws_btn slidebar" mevent="mouseover" >
    
33.     [loop1]
    
34.        <div><img src="{pic}" /></div>
    
35.     [/loop1]
    
36.     </div>
    
37. <script type="text/javascript">runslideshow();</script>
    
38. </div>

复制代码

其他的四种效果：（麻烦知道设置回帖可见的朋友给我说如何操作，我用hide标签不管用啊。这样我好把其他的四种幻灯的代码放出来。）
1、右侧缩略图幻灯，带缩略图和标题、摘要：

2、简洁的幻灯，带标题

3、大图片幻灯，带缩略图和标题

4、九宫格幻灯，大图片展示

以上都是纯diy的，不用导入js代码，不用担心冲突的问题。

////////////////////////////////////////////////////////////////////
想要代码，我这里把五种效果的代码放在了一个文本文件里，大家下载下来，自己研究吧。

游客，如果您要查看本帖隐藏内容请回复

不错，支持