首頁 > 網頁特效 > jQuery相冊 > 基于jquery的簡易版畫廊幻燈特效

基于jquery的簡易版畫廊幻燈特效

時間:2011-06-02    來源:酷站代碼

基于jquery框架的簡易版畫廊特效,點擊縮略圖時,大圖以淡入淡出方式切換,沒有過多的特效,代碼簡潔,適合做圖片展示之用。

使用方法:

1.在<head>區加入以下代碼

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simple_thumbs.js" type="text/javascript"></script>

2.在<body>區加入以下代碼

<div id="wrapper">
<div id="content">
<div id="content_left">
<div class="info_holder">
<img src="img/title.jpg"  alt="simple gallery" class="title"/>
<p class="by">Photos by: <span class="name">Chloe Rice</span></p>
<p class="by">Visit her at <a href="http://ohchloe.com" class="h_link">Oh Chloe dot com</a>
</p>
</div>
<ul id="thumb_holder">
<li><a href="javascript:void(0);"><img src="img/img1_thumb.jpg" alt="motherly" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img2_thumb.jpg" alt="xo" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img3_thumb.jpg" alt="keep your eyes open" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img4_thumb.jpg" alt="bacon bits" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img5_thumb.jpg" alt="nature sent packing" /> </a></li>
<li><a href="javascript:void(0);"><img src="img/img6_thumb.jpg" alt="snow man" /> </a></li>
</ul>
</div>
<div id="large_image_holder">
<ul id="large_images">
<li><img src="img/img1.jpg" alt="motherly" /></li>
<li><img src="img/img2.jpg" alt="xo" /></li>
<li><img src="img/img3.jpg" alt="keep your eyes open" /></li>
<li><img src="img/img4.jpg" alt="bacon bits" /></li>
<li><img src="img/img5.jpg" alt="nature sent packing" /></li>
<li><img src="img/img6.jpg" alt="snow man" /></li>
</ul>
</div>
</div>
</div>

特效推薦

熱門特效

雅思网课老师赚钱吗 为什么倍投必死 安徽快3app在哪里下载 多人棋牌游戏? 二肖二码长期免费公开 华东15选5开奖软件 9769开奖最快 搓麻将的技巧 胆码4个 拖码4 百家乐群 多乐彩山东11选5