開啟輔助瀏覽

Besv 技術討論區

 找回密碼
 立即註冊
搜尋
查看: 1243|回覆: 0

圖文大視窗模塊,不需要js,完全discuz 內置CSS支援

[複製連結]
發表於 2016-7-28 16:40:31 | 顯示全部樓層 |閱讀模式
如下代碼已經在北美生活網測試:北美生活網新聞資訊板塊
考慮到Besv的最大寬度是960px, 與北美生活網相同, 可以直接複製到模塊裡使用, 否則需要調整下面的寬度設置:

<style>
.bi_ws { float:left; width:950px; height:560px; background-color:#bb9b6c; overflow:hidden; }/*幻燈片的整體大小*/
.pi_cx { display:inline; position:relative; float:left; width:855px; height:550px; overflow:hidden; margin:6px 0 6px 6px; }/*大圖片區域樣式*/
.pi_cx div img { width:840px; height:550px; border:1px solid #946826; }/*大圖片的大小*/
.bi_ws_op { margin-left: 8px; position:absolute; left:5; bottom:3px; width:850px; height:63px; color:#FFF;  }/*字幕區定義*/
.bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:850px; height:68px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }/*標題區背景 透明度50%*/
.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);}/*縮略圖樣式(非焦點縮略圖)*/
.bi_ws .bi_ws_btn .on{ border:3px solid #4899e8 ; width:77px; height:77px; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }/*焦點縮略圖樣式*/

</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 style="padding-right:3px"><span style="font-size: 12px">{summary}</span></p>
              </li>
             </ul>
           </div>
          </div>
        [/loop]
    </div>

    <div class="bi_ws_btn slidebar">
        [loop1]
           <img src="{pic}" />
        [/loop1]
    </div>
<script type="text/javascript">runslideshow();</script>
</div>


效果圖:



如果需要縮略圖片在下面的, 代碼是這樣的:
北美生活網時尚頻道




<style>
.bi_ws { float:left; width:960px; height:700px; background-color:#999999; overflow:hidden; }/*幻燈片的整體大小*/
.pi_cx { display:inline; position:relative; float:left; width:943px; height:628px; overflow:hidden; margin:6px 0 3px 6px; }/*大圖片區域樣式*/
.pi_cx div img { width:943px; height:628px; }/*大圖片的大小*/
.bi_ws_op { margin-left: 8px;  position:absolute; left:5; bottom:0px; width:932px; height:70px; color:#FFF;  }/*字幕區定義*/
.bi_ws_opdiv { position:absolute; left:0; bottom:0px; width:947px; 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:underline; color:#FF9300; }/*文章標題鼠標經過樣式*/
.bi_ws_btn { width:954px; 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); }/*下側縮略圖區域中每個縮略圖區域樣式*/
.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); }/*焦點縮略圖樣式*/

</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>
效果圖:








您需要登入後才可以回文 登入 | 立即註冊

本版積分規則

黑名單|客戶連結|客服信箱|客服系統

Copyright © 2013 - 2019 Besv Technology Forum

專業網站主機服務

Powered by Discuz!

Wildcard SSL Certificates

快速回覆 返回頂部 返回列表