这次我们要分享的这款jQuery焦点图非常特别，它的外观特别简单，但是又相当大气。焦点图的整体样式是仿苹果样式的，由于jQuery的运用，我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效，这款jQuery焦点图插件非常适合在产片展示的网页上使用。
接下来我们一起分享一下实现这款苹果焦点图的过程及源码。
HTML代码：
从以上HTML代码可以看出，整个焦点图由一些div构成图片容器，用ul li列表构成下面的缩略图。
CSS代码：
#画廊{
/* CSS3 盒子阴影 */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
盒子阴影：0 0 3px #AAAAAA;
/* CSS3 圆角 */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
左下边框半径：4px;
-moz-border-radius-bottomright:4px;
-webkit-border-right-radius:4px;
右下边框半径：4px;
边框：1px 纯白色；
背景:url(img/panel.jpg) 重复-x 底部中心 #ffffff;
/* 画廊的宽度 */
宽度：920px；
溢出：隐藏；
}
#幻灯片{
/* 这是幻灯片区域 */
高度：400px；
/* jQuery 随后将宽度更改为所有幻灯片宽度的总和。 */
宽度：920px；
溢出：隐藏；
}
.幻灯片{
浮动：左；
}
#菜单{
/* 这是缩略图的容器 */
高度：45px；
}
ul{
边距：0px;
填充：0px；
}
李{
/* 每个缩略图都是一个 li 元素 */
宽度：60px；
显示：内联块；
列表样式：无；
高度：45px；
溢出：隐藏；
}
li.inact:悬停{
/* 非活动状态，鼠标悬停时突出显示 */
背景：url(img/pic_bg.png) 重复;
}
li.act,li.act:悬停{
/* 拇指的活动状态 */
背景：url(img/active_bg.png) 不重复；
}
li. 执行一个{
光标：默认；
}
.fbar{
/* 最左边的垂直条，位于第一个缩略图旁边 */
宽度：2px；
背景：url(img/divider.png) 右无重复；
}
李阿{
显示：块；
背景：url(img/divider.png) 右无重复；
高度：35px；
顶部填充：10px;
}
一张图片{
边框：无；
}
CSS代码也非常简单，都是一些简单设置而已。
jQuery代码：
$(文档).ready(function(){
/* 这段代码在 DOM 完全加载后执行 */
var totWidth=0;
var 位置 = new Array();
$('#slides .slide').each(function(i){
/* 遍历所有幻灯片，并将其累计宽度存储在 totWidth 中 */
位置[i]= totWidth;
totWidth = $(this).width();
/* 位置数组包含每张幻灯片相对于容器左侧部分的交换偏移量 */
if(!$(this).width())
{
Alert("请填写所有图片的宽度和高度！");
返回错误；
}
});
$('#slides').width(totWidth);
/* 将 cotnainer div 的宽度更改为所有幻灯片组合的精确宽度 */
$('#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();
/* 阻止链接的默认操作 */
// 如果单击图标则停止自动前进：
if(!keepScroll)clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* 页面加载时，将第一个缩略图标记为活动 */
/*****
*
* 启用自动前进。
*
****/
var 当前=1;
函数 autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] 将作为第 28 行 click 函数的 keepScroll 参数传递
当前；
}
// 滑块自动前进的秒数：
var changeEvery = 10;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
/* 自定义结束 */
});
这是焦点图的重点，完成了图片的动画逻辑，点击一下即可切换图片。
