discuz!首页轮播图模板 [复制链接]


2912 0
步骤:
1. 门户->模块模板->添加->(选择帖子模块)->提交

模板名称: (自己填写标示名,随意)
下面的输入框代码:
<div  class="i_ws">

<div class="i_cx slidebox">
<div class="slideshow">
[loop]
<div>
<a href="{url}"{target}>
<img src="{pic}" width="{picwidth}" height="{picheight}" />
</a>
</div>
[/loop]
</div>


<div class="i_ws_opdiv">
</div>

<div class="swe">

<div class="btnsr slideother">
[loop1]
<h2>
{title}
</h2>
[/loop1]
</div>

<div class="btns slidebar">
[loop2]
<em>

</em>
[/loop2]
</div>

</div>

</div>

</div>

<script type="text/javascript">
runslideshow();
</script>
2. 修改css样式
在你的模板中css文件(我的在 template/godiscuz/common/extend_common.css)里面添加:
/*幻灯片方框的margin值,即整体图片部分距离外面一层方框的值*/
.block { margin:5px;}
/*幻灯片整体宽高*/
.i_ws { width:320px; height:275px; overflow:hidden; }
.i_cx { display:inline; position:relative; overflow:hidden;}
.i_cx div img { width:320px; height:275px; }
/*图片下方长条背景*/
.i_ws_opdiv { position:absolute; left:0px; bottom:0px; width:100%; height:25px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=38); }
/*图片下方长条*/
.swe{ width:307px; position:absolute; left:5px; bottom:1px; height:25px; line-height:25px;}
/*标题部分*/
.swe .btnsr{ float:left; font-size:12px; color:#fff; line-height:25px; text-indent: 2px;}
.swe .btnsr h2{font-weight: normal;}
/*幻灯片方块*/
.swe .btns{ float:right; width:97px; position:absolute; z-index:50; bottom:4px; left:208px; font-size:11px;}
.swe .btns em{ width:15px; height:15px; display:block; float:left; background:#fff ;color:#353535; line-height:15px; text-align:center; margin-right:3px; cursor:pointer; margin-top:2px; font-weight: bold;}
.swe .btns em.on{ background:#FF7D01; color:#fff; font-weight: bold;}


/* shouye banner */
/*#nv_forum .i_ws { width:355px; height:275px; overflow:hidden; }*/
#nv_forum .i_ws { width:430px; height:275px; overflow:hidden; }
.i_cx { display:inline; position:relative; overflow:hidden;}
/*#nv_forum .i_cx div img { width:355px; height:275px; }*/
#nv_forum .i_cx div img { width:430px; height:275px; }
/*shouye 幻灯片方块*/
#nv_forum .swe .btns{ float:right; width:140px; position:absolute; z-index:50; bottom:4px; left:290px; font-size:11px;}
#nv_forum .swe .btns em{ width:22px; height:10px; display:block; float:left; background:#fff ;color:#353535; line-height:15px; text-align:center; margin-right:5px; cursor:pointer; margin-top:2px; font-weight: bold;}
#nv_forum .swe .btns em.on{ background:#FF7D01; color:#fff; font-weight: bold;}



最新回复 (0)
返回
支持中心
邮箱:winkill2012@qqcom
新站优化中!部分功能尚未完善,敬请谅解!
支持中心