使用jQuery仿苹果官网焦点图特效

这次我们要分享的这款jQuery焦点图非常特别，它的外观特别简单，但是又相当大气。焦点图的整体样式是仿苹果样式的，由于jQuery的运用，我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效，这款jQuery焦点图插件非常适合在产片展示的网页上使用。

接下来我们一起分享一下实现这款苹果焦点图的过程及源码。

HTML代码：

<div id=”gallery”>
    <div id=”slides” style=”width: 3680px; margin-left: 0px;”>
    <div class=”slide”><img width=”920″ height=”400″ alt=”side” src=”img/sample_slides/macbook.jpg”></div>
    <div class=”slide”><img width=”920″ height=”400″ alt=”side” src=”img/sample_slides/iphone.jpg”></div>
    <div class=”slide”><img width=”920″ height=”400″ alt=”side” src=”img/sample_slides/imac.jpg”></div>
    <div class=”slide”><a target=”_blank” href=”http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/”><img width=”920″ height=”400″ alt=”side” src=”img/sample_slides/info.jpg”></a></div>
    </div>
    <div id=”menu”>
    <ul>
        <li class=”fbar inact”> </li><li class=”menuItem inact act”><a href=””><img alt=”thumbnail” src=”img/sample_slides/thumb_macbook.png”></a></li><li class=”menuItem inact”><a href=””><img alt=”thumbnail” src=”img/sample_slides/thumb_iphone.png”></a></li><li class=”menuItem inact”><a href=””><img alt=”thumbnail” src=”img/sample_slides/thumb_imac.png”></a></li><li class=”menuItem inact”><a href=””><img alt=”thumbnail” src=”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;