真正的百变幻灯片 带CSS 用官方js

带CSS 用官方js 调用幻灯片


<style>
.i_ws { float:left; width:300px; height:328px; overflow:hidden; }
.i_cx { display:inline; position:relative; float:left; overflow:hidden;}
.i_cx div img { width:300px; height:328px; }
.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{ position:absolute;left:5px; bottom:0px; height:25px;}
.swe .btns{width:97px; float:right; position:absolute; z-index:500; left:203px; font-size:11px;}
.swe .btnsr{ float:left; font-size:12px; color:#fff; line-height:25px; text-indent: 2px;}
.swe .btnsr h2{font-weight: normal;}
.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:5px; font-weight: bold;}
.swe .btns em.on{ background:#FF7D01; color:#fff; font-weight: bold;}
</style>
<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>{currentorder}</em>
[/loop2]
</div>
</div>
</div>
</div>
<script type="text/javascript">runslideshow();</script>

<style>
.bi_ws { float:left; width:310px; height:399px; overflow:hidden; }
.pi_cx { display:inline; position:relative; float:left; width:300px; height:333px; overflow:hidden; margin:5px 5px 0 5px; }
.pi_cx div img { width:300px; height:333px; }
.bi_ws_opdiv { position:absolute; left:0; bottom:-2px; width:300px; height:78px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
.bi_ws_btn div {float:left; width:75px; height:61px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70); }
.bi_ws_btn { margin-left: 5px;  }
.bi_ws_op { margin-left: 8px;  }
  .bi_ws_btn img { width:67px; height:43px; margin:9px 0 0 4px; }
  .bi_ws_op { position:absolute; left:5; bottom:-2px; width:280px; height:75px; color:#FFF; }
  .bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; }
.bi_ws_op h2 a:hover { text-decoration:none; }
.bi_ws .bi_ws_btn .on{ background:url({IMGDIR}/1-1.png) no-repeat 0 0; width:75px; height:56px; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
</style>
<div class="bm tb_h cl rgs car">
<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>
            </div>
<script type="text/javascript">runslideshow();</script>
</div>

调用如何改呢？

看看

修改下 很好用

感谢分享，收藏