焦点图轮播图代码 jquery缩略图预览焦点幻灯片

特效描述：利用jQuery实现 缩略图 预览焦点 幻灯片，利用jQuery实现缩略图预览焦点幻灯片

代码结构

1. 引入CSS

<link href="style.css" rel="stylesheet" type="text/css" />

2. 引入JS

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

<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>

<script type="text/javascript" src="code.js"></script>

3. HTML代码

<div id="wrapper">
<div id="main">
<ul class="nav">
<li><a href="#1"><p>1</p></a></li>
<li><a href="#2"><p>2</p></a></li>
<li><a href="#3"><p>3</p></a></li>
</ul>
<div id="1">
<div id="tabdivimg">
<img src="images/1.jpg" width="415" height="284" />
</div>
</div><!–/popular–>
<div id="2">
<div id="tabdivimg">
<img src="images/2.jpg" width="415" height="284" /></a>
</div>
</div><!–/recent–>
<div id="3">
<div id="tabdivimg">
<img src="images/3.jpg" width="415" height="284" />
</div>
</div><!–featured–>
</div><!–/widget–>
</div>

下载地址

立即下载