β

带缩略图切换的jQuery相册特效

jQuery吧-Write Less, Do More 261 阅读

缩略图切换jQuery相册特效
带缩略图切换的jQuery相册特效
部分代码

<div class="box-163css">
	<div id="bigpicarea">
		<p class="bigbtnPrev"><span id="big_play_prev"></span></p>
		<div id="image_xixi-01" class="image" style="opacity: 1; display: block; ">
			<a href="http://www.jqueryba.com/"" target="_blank" title="斯嘉丽 全棉斜纹印花四件套">
			<img alt="斯嘉丽 全棉斜纹印花四件套" src=""images/homenew_05.jpg"></a>
			<div class="word" style="display: block;">
			</div>
		</div>
		<div id="image_xixi-02" class="image" style="opacity: 0; display: none; ">
			<a href="" target="_blank">
			<img alt="薇诺 全棉提花六件套" src="images/homenew2_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-03" class="image" style="opacity: 0; display: none; ">
			<a href="" target="_blank">
			<img alt="圣路易斯 全棉斜纹印花四件套" src="images/homenew3_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-04" class="image" style="opacity: 0; display: none; ">
			<a href="" target="_blank">
			<img alt="玛丽 贡丝棉大提花六件套" src="images/homenew4_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-05" class="image" style="opacity: 0; display: none; ">
			<a href="" target="_blank">
			<img alt="莫代尔桑丝春秋被" src="images/homenew5_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-06" class="image" style="opacity: 0; display: none; ">
			<a href="" target="_blank">
			<img alt="透气排湿床垫新一代" src="images/homenew6_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-07" class="image" style="opacity: 0; display: none; ">
			<a href="" target="_blank">
			<img alt="奢韵桑蚕丝枕" src="images/homenew7_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<p class="bigbtnNext"><span id="big_play_next"></span></p>
	</div>
	<div id="smallpicarea">
		<div id="thumbs">
			<ul>
				<li>
				<a id="thumb_xixi-01" href="" class="current">
				<img src="images/homenew_06.jpg" alt="斯嘉丽 全棉斜纹印花四件套"></a> </li>
				<li>
				<a id="thumb_xixi-02" href="">
				<img src="images/homenew_08.jpg" alt="薇诺 全棉提花六件套"></a> </li>
				<li>
				<a id="thumb_xixi-03" href="">
				<img src="images/homenew_10.jpg" alt="圣路易斯 全棉斜纹印花四件套"></a> </li>
				<li>
				<a id="thumb_xixi-04" href="">
				<img src="images/homenew_12.jpg" alt="玛丽 贡丝棉大提花六件套"></a> </li>
				<li>
				<a id="thumb_xixi-05" href="">
				<img src="images/homenew_14.jpg" alt="莫代尔桑丝春秋被"></a> </li>
				<li>
				<a id="thumb_xixi-06" href="">
				<img src="images/homenew_16.jpg" alt="透气排湿床垫新一代"></a> </li>
				<li class="last">
				<a id="thumb_xixi-07" href="">
				<img src="images/homenew_18.jpg" alt="奢韵桑蚕丝枕"></a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
        var target = ["xixi-01", "xixi-02", "xixi-03", "xixi-04", "xixi-05", "xixi-06", "xixi-07"];
    </script>
</div>

天外飞仙的在线效果DEMO

作者:jQuery吧-Write Less, Do More
注重前端开发
原文地址:带缩略图切换的jQuery相册特效, 感谢原作者分享。

发表评论