这次我们要分享的这款jQuery焦点图非常特别，它的外观特别简单，但是又相当大气。焦点图的整体样式是仿苹果样式的，由于jQuery的运用，我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效，这款jQuery焦点图插件非常适合在产片展示的网页上使用。
接下来我们一起分享一下实现这款苹果焦点图的过程及源码。
HTML代码：
复制代码 代码如下:
<div>
<div>
<div><img alt="side" src="https://www.jb51.net/img/sample_slides/macbook.jpg"></div>
<div><img alt="side" src="https://www.jb51.net/img/sample_slides/iphone.jpg"></div>
<div><img alt="side" src="https://www.jb51.net/img/sample_slides/imac.jpg"></div>
<div><a target="_blank" href=""><img alt="side" src="https://www.jb51.net/img/sample_slides/info.jpg"></a></div>
</div>
<div>
<ul>
<li> </li><li><a href=""><img alt="thumbnail" src="https://www.jb51.net/img/sample_slides/thumb_macbook.png"></a></li><li><a href=""><img alt="thumbnail" src="https://www.jb51.net/img/sample_slides/thumb_iphone.png"></a></li><li><a href=""><img alt="thumbnail" src="https://www.jb51.net/img/sample_slides/thumb_imac.png"></a></li><li><a href=""><img alt="thumbnail" src="https://www.jb51.net/img/sample_slides/thumb_about.png"></a></li>
</ul>
</div>
</div>
从以上HTML代码可以看出，整个焦点图由一些div构成图片容器，用ul li列表构成下面的缩略图。
CSS代码：
复制代码 代码如下:
#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;
/* The width of the gallery */
width:920px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:400px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
/* This is the container for the thumbnails */
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}
li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}
a img{
border:none;
}
CSS代码也非常简单，都是一些简单设置而已。
jQuery代码：
复制代码 代码如下: