好看的图片幻灯

.bi_ws_op h2 a{ font-size: 18px; font-weight: bolder; color:#FF0 }/*文章标题样式*/
.bi_ws_op h2 a:hover { text-decoration:none; }/*文章标题鼠标经过样式*/
.bi_ws_btn img { width:75px; height:75px; margin:9px 8px 0px 3px ; border:1px solid #ffffff; float:right; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70);}/*缩略图样式（非焦点缩略图）*/
.pi_cx div img { width:350px; height:350px; border:1px solid #946826; }/*大图片的大小*/
.bi_ws_op { margin-left: 8px; position:absolute; left:5; bottom:3px; width:350px; height:63px; color:#FFF; }/*字幕区定义*/
.bi_ws_btn img { width:80px; height:54px; margin:0px; border:1px solid #ffffff; }/*缩略图样式（非焦点缩略图）*/
.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); }/*焦点缩略图样式*/
.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%*/
<ul class="slideshow">
[loop]
<li class="slide-item" style="width: {picwidth}px; height: {picheight}px;"><a href="{url}" title="{title}" {target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}"/><span class="title">{title}</span> </a></li>
.slide-item img { width:100%; height:100%; }
.slide-page { position:absolute; right:20px; bottom:10px; }
.slide-item span { position:absolute; left:10px; bottom:20px; display:block; width:100%; height:50px; text-indent:15px; line-height:21px; filter:progid:DXImageTransform.Mi;true',startColorstr='#66000000',endColorstr='#66000000'); background:rgba(0,0,0,0.4); overflow:hidden; }
<div class=" bi_ws slidebox">
<div class="pi_cx slideshow">
[loop]
<div>
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
.bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; }/*文章标题样式*/
.bi_ws_op h2 a:hover { text-decoration:underline; color:#FF9300; }/*文章标题鼠标经过样式*/
.bi_ws_btn { width:344px; height:60px; float:left;margin-left:6px; }/*下侧缩略图区域样式*/
.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); }/*下侧缩略图区域中每个缩略图区域样式*/
.pi_cx { display:inline; position:relative; float:left; width:337px; height:258px; overflow:hidden; margin:6px 0 3px 6px; }/*大图片区域样式*/
.pi_cx div img { width:337px; height:258px; }/*大图片的大小*/
<p style="padding-right:3px"><span style="font-size: 12px">{summary}</span></p>
</li>
</ul>
</div>
.cnt-sub .slide-player span { height:80px; font:20px/50px "microsoft yahei"; }
.slide-player .slide-item { position:absolute; top:0; left:0; width:100%; height:100%; }
[/loop]
</ul>
<div class="slide-page slidebar">
[loop1]
<a href="javascript:;">{currentorder}</a>
[/loop1]
</div>
</div>
<script type="text/javascript">
//第一种幻灯
<style>
.bi_ws { float:left; width:456px; height:360px; background-color:#bb9b6c; overflow:hidden; }/*幻灯片的整体大小*/
.pi_cx { display:inline; position:relative; float:left; width:355px; height:350px; overflow:hidden; margin:6px 0 6px 6px; }/*大图片区域样式*/
</div>
<script type="text/javascript">runslideshow();</script>
</div>
//第二种幻灯效果
<style>
.slide-player { position:relative; overflow:hidden; width:890px; height:450px; }//这里的宽度和高度都可以调整，不过要和模板的数据一致
</style>
<div class=" bi_ws slidebox">
<div class="bi_ws_opdiv"></div>
<div class="bi_ws_op">
<ul>
<li>
<h2><a href="{url}"{target}>{title}</a></h2>
.slide-player .slide-page a, .slide-player .slide-page a:visited { float:left; margin-right:5px; padding-top:13px; width:13px; height:0; text-align:center; font:700 12px/15px Simsun; background:#FFF; border-radius:6px; box-shadow:inset 1px 1px 2px rgba(0,0,0,.4); overflow:hidden; }