带缩略图幻灯片的改进

先来效果图:

对帖子
https://discuz.dismall.com/forum.php? ... 09&pre_pos=4&ext=CB  9楼的幻灯片加以改进
解决了"鼠标滑过缩略图时,没有对应到大图的问题"

以下是代码部分:

1. <style>
   
2. .bi_ws { float:left; width:470px; height:360px; background-color:#bb9b6c; overflow:hidden; }/*幻灯片的整体大小*/
   
3. .pi_cx { display:inline; position:relative; float:left; width:355px; height:350px; overflow:hidden; margin:6px 0 6px 6px; }/*大图片区域样式*/
   
4. .pi_cx div img { width:350px; height:350px; border:1px solid #946826; }/*大图片的大小*/
   
5. .bi_ws_op { margin-left: 8px;  position:absolute; left:5; bottom:3px; width:350px; height:50px; color:#FFF;  }/*字幕区定义*/
   
6. .bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:350px; height:58px; 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; color:#FFFF00 }/*文章标题样式*/
   
8. .bi_ws_op h2 a:hover { text-decoration:none;  }/*文章标题鼠标经过样式*/
   
9. 
   
10. .bi_ws_btn img { width:75px; height:75px; margin:9px 8px 0px 10px ; border:1px solid #ffffff;  float:right; cursor:pointer;  opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70);}/*缩略图样式（非焦点缩略图）*/
    
11. .bi_ws .bi_ws_btn .on{ border:3px solid #4899e8 ; width:80px; height:80px; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/
    
12. 
    
13. .bi_ws_right { float:right; width:490px;}
    
14. 
    
15. 
    
16. </style>
    
17. <div class=" bi_ws slidebox">
    
18.     <div class="pi_cx slideshow">
    
19.         [loop]
    
20.           <div>
    
21.            <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
    
22.            <div class="bi_ws_opdiv"></div>
    
23.            <div class="bi_ws_op">
    
24.              <ul>
    
25.               <li>
    
26.                <h2><a href="{url}"{target}>{title}</a></h2>
    
27.                <p><span style="font-size: 12px">{summary}</span></p>
    
28.               </li>
    
29.              </ul>
    
30.            </div>
    
31.           </div>
    
32.         [/loop]
    
33.     </div>
    
34.    
    
35.     <div class="bi_ws_btn slidebar">
    
36.         [loop1]
    
37.            <img src="{pic}" />
    
38.         [/loop1]
    
39.     </div>
    
40. <script type="text/javascript">runslideshow();</script>
    
41. </div>
    

复制代码

然后再增加几个数据,就能看到上面的效果了{:soso_e100:}

分享就是美德

水分子 发表于 2013-7-22 11:08
分享就是美德

哈哈,你终于从小黑屋里面出来啦?
这是从别人的模块改进的,那个模板有点问题,大家都看到那个问题,所以我就想弄一个比较完美的出来

周末进去周一出来，习惯了

非常不错 谢谢分享~

水分子 发表于 2013-7-22 11:23
周末进去周一出来，习惯了

你再来看看我那个主页混乱的问题
https://discuz.dismall.com/forum. ... ead&tid=3372247

看我之前回复的

crx349 发表于 2013-7-22 11:25
非常不错 谢谢分享~

呵呵,接触DZ刚不久,好久不熟悉的地方,还得请教大家!

很不错,收录了