这次我们要分享的这款jQuery焦点图非常特别，它的外观特别简单，但是又相当大气。焦点图的整体样式是仿苹果样式的，由于jQuery的运用，我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效，这款jQuery焦点图插件非常适合在产片展示的网页上使用。
接下来我们一起分享一下实现这款苹果焦点图的过程及源码。
HTML代码：
复制代码 代码如下:
http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/">
从以上HTML代码可以看出，整个焦点图由一些div构成图片容器，用ul li列表构成下面的缩略图。
CSS代码：
复制代码 代码如下:
#gallery{
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
-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;
width:920px;
overflow:hidden;
}
#slides{
height:400px;
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}
li.inact:hover{
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
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代码：
复制代码 代码如下:
$(document).ready(function(){
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
positions[i]= totWidth;
totWidth += $(this).width();
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
$('#menu ul li a').click(function(e,keepScroll){
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevall('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
e.preventDefault();
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 10;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
});
这是焦点图的重点，完成了图片滑块的动画逻辑，点击缩略图即可切换图片。
