首页 > 网页特效 > 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>

分类导航

特效推荐

热门特效

热门教程