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

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

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

超文本标记语言代码：

复制代码代码如下： div id=' gallery ' div id=' slides ' style=' width : 3680 px；边距-左侧： 0pxdiv class=' slide ' img width=' 920 ' height=' 400 ' alt=' side ' src=' http : img/sample _ slides/macbook。jpg '/div div class=' slide ' img width=' 920 ' height=' 400 ' alt=' side ' src=' http : img/sample _ slides/iphone。jpg '/div div class=' slide ' img width=' 920 ' height=' 400 '

从以上超文本标记语言代码可以看出，整个焦点图由一些差异构成图片容器，用礼券列表列表构成下面的缩略图。

半铸钢钢性铸铁(铸造半钢)代码：

复制代码代码如下： #图库{/* CSS3 Box Shadow */-moz-Box-Shadow :0 0 3px # AAA；-WebKit-box-shadow :0 0 3px # AAA；盒影：0 0 3px # AAA/* CSS3圆角*/-蚊子-边框-半径-左下角：4 px-web套件-边框-左下-半径：4 px边框-底部-左侧-半径：4 px-moz-边界-半径-右下角：4 px-web套件-边框-底部-右侧-半径：4 px边框-底部-右侧-半径：4 pxborder:1px纯白色；背景： URL(img/面板。jpg)重复-x底部中心# ffffff/*图库的宽度*/宽度：920 px飞越：隐藏；} #幻灯片{ /*这是幻灯片区域*/高度：400 px/* jQuery稍后会将宽度更改为所有幻灯片宽度的总和*/宽度：920 px飞越：隐藏；}.幻灯片{ float:left } #菜单{ /*这是缩略图的容器*/高度：45 px} ul { margin :0 pxpadding :0 px } Li {/*每个缩略图都是里元素*/宽度：60 px显示：内嵌块；列表式：无；高度：45px飞越：隐藏；}li.inact:hover{ /*鼠标悬停在*/后台： URL(img/pic _ BG。巴布亚新几内亚)上突出显示的非活动状态重复；李，李。act :悬停{/*拇指的活动状态*/后台： URL(img/active _ BG。巴布亚新几内亚)无重复；}li。充当{ cursor:default}。fbar{ /*最左边的竖线，在第一个缩略图旁边*/width :2 px；背景： URL(img/分隔线。巴布亚新几内亚)无重复右；}阿利{ display : block background : URL(img/divider。巴布亚新几内亚)无重复右；高度：35 xpadd-top :10 px；}一个img { border:none}CSS代码也非常简单，都是一些简单设置而已。

框架代码：

复制代码代码如下：美元（文件)。就绪(函数(){ /*该代码在数字正射影像图完全加载后执行*/var TotWidth=0；var positions=new Array()；$(' #张幻灯片。幻灯片')。每个（函数{/*遍历所有幻灯片，并将它们的累积宽度存储在总宽度*/位置[I]=总宽度中；总宽度=$(这个).宽度();/*职位数组包含每张幻灯片相对于容器左侧的相对偏移量*/if(！$(这个)。width()) { alert('请填写所有图片的宽度高度!');返回false } })；$(' #幻灯片')。宽度(ToTwidth)；/*将科特纳分区的宽度更改为所有幻灯片组合的精确宽度*/$(' #菜单保险商实验所阿利')。单击（函数(e，keepScroll){ /*在缩略图上单击*/$('li.menuItem ').remove CLaSS(“act”).addCLaSS(' inact ')；$(这个)。父项()。addCLaSS(' act ')；var pos=$(这个)。父项()。普雷瓦尔('。菜单项').长度；$(' #幻灯片')。停止()。动画({左边距：-位置[pos]' px ' }，450)；/*开始滑动动画*/e . prevent default()；/*阻止链接的默认操作*///如果已单击图标，则停止自动前进：如果(!keepScroll)clearInterval(itvl)；});$(' #菜单ul Li。menuitem : first ').add CLaSS(act).兄弟姐妹()。addCLaSS(' inact ')；/*页面加载时，将第一个缩略图标记为活动*/* * * * * * * *启用自动推进****/var电流=1;函数autoAdvance() { if(current==-1)返回false$(' #阿利菜单')。eq(当前% $(' #菜单保险商实验所阿利')。长度)。触发器(' click '，[true])；//[真]将作为第28行当前点击函数的保持滚动参数传递；} //滑块在：变量变化每=10中自动前进的秒数；var itvl=setInterval(function(){ autoAdvance()}，每隔* 1000更改一次)；/*自定义结束*/});

这是焦点图的重点，完成了图片滑块的动画逻辑，点击缩略图即可切换图片。