注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

品味人生博客

网页及博客素材,软件教程,网赚教程,技术知识总汇

 
 
 

日志

 
 

DZ论坛带缩略图幻灯片代码  

2015-02-02 11:44:25|  分类: html技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<style>
.bi_ws { float:left; width:348px; height:383px; background-color:#FFFFFF; overflow:hidden; }/*幻灯片的整体大小*/
.pi_cx { display:inline; position:relative; float:left; width:271px; height:383px; overflow:hidden; margin:6px 0 6px 6px; }/*大图片区域样式*/
.pi_cx div img { width:271px; height:368px; }/*大图片的大小*/
.bi_ws_op { margin-left: 5px;  position:absolute; left:5; bottom:0px; width:270px; height:30px; color:#FFF;  }/*字幕区定义*/
.bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:270px; height:20px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*标题区背景 透明度50%*/
.bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; }/*文章标题样式*/
.bi_ws_op h2 a:hover { text-decoration:none; }/*文章标题鼠标经过样式*/
.bi_ws_btn { width:70px; height:260px; float:right;}/*右侧缩略图区域样式*/
.bi_ws_btn div {float:left; width:73px; height:71px; cursor:pointer;  margin:6px 0px 0; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }/*右侧缩略图区域中每个缩略图区域样式*/
.bi_ws_btn img { width:73px; height:71px; margin:2px 7px 0 ; border:1px solid #ffffff; }/*缩略图样式(非焦点缩略图)*/
.bi_ws .bi_ws_btn .on{ background:url(/forum/static/image/common/1-1.png) no-repeat 0 0; width:73px; height:71px;  opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/

.bi_ws_right { float:right; width:490px;}


</style>
<div class=" bi_ws slidebox">
    <div class="pi_cx slideshow">
    [loop]
      <div>
       <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
       <div class="bi_ws_opdiv"></div>
       <div class="bi_ws_op">
         <ul>
          <li>
           <h2><a href="{url}"{target}>{title}</a></h2>
           <p><span style="font-size: 12px">{summary}</span></p>
          </li>
         </ul>
       </div>
      </div>
    [/loop]
    </div>
    <div class="bi_ws_btn slidebar" mevent="mouseover" >
    [loop1]
       <div><img src="{pic}" /></div>
    [/loop1]
    </div>
<script type="text/javascript">runslideshow();</script>
</div>
  评论这张
 
阅读(37)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017