[Javascript] 纯diy带缩略图幻灯片代码

[复制链接]
  1. <style>
  2. .bi_ws { float:left; width:470px; height:360px; background-color:#bb9b6c; overflow:hidden; }/*幻灯片的整体大小*/
  3. .pi_cx { display:inline; position:relative; float:left; width:355px; height:350px; overflow:hidden; margin:6px 0 6px 6px; }/*大图片区域样式*/
  4. .pi_cx div img { width:350px; height:350px; border:1px solid #946826; }/*大图片的大小*/
  5. .bi_ws_op { margin-left: 8px;  position:absolute; left:5; bottom:3px; width:350px; height:50px; color:#FFF;  }/*字幕区定义*/
  6. .bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:350px; height:58px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*标题区背景 透明度50%*/
  7. .bi_ws_op h2 a{ font-size: 18px; color:#FFF; font-weight: bolder; color:#FFFF00 }/*文章标题样式*/
  8. .bi_ws_op h2 a:hover { text-decoration:none;  }/*文章标题鼠标经过样式*/

  9. .bi_ws_btn img { width:75px; height:75px; margin:9px 8px 0px 10px ; border:1px solid #ffffff;  float:right; cursor:pointer;  opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=70);}/*缩略图样式(非焦点缩略图)*/
  10. .bi_ws .bi_ws_btn .on{ border:3px solid #4899e8 ; width:80px; height:80px; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦点缩略图样式*/

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


  12. </style>
  13. <div class=" bi_ws slidebox">
  14.     <div class="pi_cx slideshow">
  15.         [loop]
  16.           <div>
  17.            <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
  18.            <div class="bi_ws_opdiv"></div>
  19.            <div class="bi_ws_op">
  20.              <ul>
  21.               <li>
  22.                <h2><a href="{url}"{target}>{title}</a></h2>
  23.                <p><span style="font-size: 12px">{summary}</span></p>
  24.               </li>
  25.              </ul>
  26.            </div>
  27.           </div>
  28.         [/loop]
  29.     </div>
  30.    
  31.     <div class="bi_ws_btn slidebar">
  32.         [loop1]
  33.            <img src="{pic}" />
  34.         [/loop1]
  35.     </div>
  36. <script type="text/javascript">runslideshow();</script>
  37. </div>
复制代码

回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源