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

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

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

HTML代码：

复制代码 代码如下:

   

   

   

   

   

http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"> width="920" style="max-width:90%" alt="使用jQuery仿苹果官网焦点图特效_jquery" src="img/sample_slides/info.jpg">

   

   

   

       
• 
• 
• 
• 

   

   

 

从以上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);
    /* 自定义结束 */
});

这是焦点图的重点，完成了图片的动画逻辑，点击一下即可切换图片。