多圖展示滑動(dòng)過(guò)渡效果

2019-11-21 02:24:55

字體：大中小

供稿：網(wǎng)友

<base href="http://www.survivalescaperooms.com/"/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">      <head>         <title>ß | Fyrebase™</title>         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />         <meta http-equiv="imagetoolbar" content="no" />         <style type="text/css" media="screen">@import url("base.css");</style>         <script type="text/javascript" language="javascript">             var thumbCount = 4;         </script>         <script type="text/javascript" language="javascript" src="base.js"></script>     </head>     <body>         <div   class="iwvjtn8m0"   id="fbMaster">             <dl id="pNav">                 <dt><img src="https://www.jb51.netimages/logo_fyrebase.gif" width="190" height="58" alt="Fyrebase.com Logo" /></dt>                 <dd><a class="active" title="">Paparazzi Kings</a></dd>                 <dd><a href="index.html?pid=aadree" title="">Aadree</a></dd>                 <dd><a href="index.html?pid=c9" title="">Cloud 9</a></dd>                 <dd><a href="index.html?pid=va" title="">Vin Australis</a></dd>                 <dd><a href="index.html?pid=dkd" title="">David K Difference</a></dd>                 </dl>             <dl id="content">                 <dt>                     <div>                         <span id="zoom"><img id="zoom0" src="https://www.jb51.net/article/ss_lrg_pk0.jpg" width="514" height="432" alt="" /><img id="zoom1" src="https://www.jb51.net/article/ss_lrg_pk1.jpg" width="514" height="432" alt="" /><img id="zoom2" src="https://www.jb51.net/article/ss_lrg_pk2.jpg" width="514" height="432" alt="" /><img id="zoom3" src="https://www.jb51.net/article/ss_lrg_pk3.jpg" width="514" height="432" alt="" /></span>                         </div>                     <script type="text/javascript" language="javascript">                         document.getElementById('zoom').style.left    = -514 + 'px';                         document.getElementById("zoom1").style.visibility    = "hidden";                         document.getElementById("zoom2").style.visibility    = "hidden";                         document.getElementById("zoom3").style.visibility    = "hidden";                     </script>                 </dt>                 <dd><a title=""><img id="thumb0" src="https://www.jb51.net/article/ss_sml_pk0.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb0").style.visibility    = "hidden";</script></dd>                 <dd><a title=""><img id="thumb1" src="https://www.jb51.net/article/ss_sml_pk1.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb1").style.visibility    = "hidden";</script></dd>                 <dd><a title=""><img id="thumb2" src="https://www.jb51.net/article/ss_sml_pk2.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb2").style.visibility    = "hidden";</script></dd>                 <dd class="last"><a title=""><img id="thumb3" src="https://www.jb51.net/article/ss_sml_pk3.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb3").style.visibility    = "hidden";</script></dd>                 </dl>         </div>     </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：多圖展示點(diǎn)擊切換效果模擬的flash效果，點(diǎn)小圖放大顯示，再點(diǎn)恢復(fù)默認(rèn)。

下一篇：多圖幻燈Wipe擦洗效果