Html幻灯片代码 左右回弹焦点图切换滑动代码

特效描述：利用jquery实现左右回弹滑动幻灯片，利用jquery实现左右回弹滑动幻灯片

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

2. HTML代码

<div id="slider">
<div id="viewer">
<img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" />
<img id="image2" src="img/atari.jpg" alt="Atari TT030" />
<img id="image3" src="img/commodore16.jpg" alt="Commodore 64" />
<img id="image4" src="img/commodore128.jpg" alt="Commodore 128" />
<img id="image5" src="img/spectrum.jpg" alt="Sinclair ZX Spectrum +2" />
</div>
<ul id="ui">
<li class="hidden" id="pv"><a href="" title="Previous">&laquo;</a></li>
<li><a href="#image1" title="Image 1" class="active">Image 1</a></li>
<li><a href="#image2" title="Image 2">Image 2</a></li>
<li><a href="#image3" title="Image 3">Image 3</a></li>
<li><a href="#image4" title="Image 4">Image 4</a></li>
<li><a href="#image5" title="Image 5">Image 5</a></li>
<li class="hidden" id="next"><a href="" title="Next">&raquo;</a></li>
</ul>
</div>

下载地址

立即下载