学习Discuz! X3.2记录：又一个幻灯的代码

最新推荐文章于 2022-12-21 13:59:02 发布

老狼8848

最新推荐文章于 2022-12-21 13:59:02 发布

阅读量3.2k

点赞数

分类专栏： discuz 文章标签： Discuz X3.2 DIY 幻灯片

本文链接：https://blog.csdn.net/bq_cui/article/details/50720820

版权

discuz 专栏收录该内容

93 篇文章 1 订阅

订阅专栏

<style>
.bi_ws { float:left; width:450px; height:270px; background-color:#999999; overflow:hidden; }/*幻灯片的整体大小*/
.pi_cx { display:inline; position:relative; float:left; width:337px; height:258px; overflow:hidden; margin:6px 0 6px 6px; }/*大图片区域样式*/
.pi_cx div img { width:337px; height:258px; }/*大图片的大小*/
.bi_ws_op { margin-left: 8px;  position:absolute; left:5; bottom:0px; width:322px; height:70px; color:#FFF;  }/*字幕区定义*/
.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%*/
.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:106px; height:270px; float:right;}/*右侧缩略图区域样式*/
.bi_ws_btn div {float:left; width:106px; height:60px; cursor:pointer;  margin:6px 0px 0; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }/*右侧缩略图区域中每个缩略图区域样式*/
.bi_ws_btn img { width:90px; height:54px; 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:103px; height:60px;  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>

这个直接编辑前面的模块模板“DIY幻灯片BY_CBQ”代码为上面的代码即可。图片宽度设置为450×270。

原来代码的地址：http://www.discuz.net/thread-2499609-1-1.html