首先非常感谢网友czqn8的无私分享，此作品也是他从天猫商城网站中整理出来分享给大家的，实现了全屏jquery焦点图特效，分为大图和小图片组合，大图是全屏显示，小图是带动画效果显示，都是以背景图片的形式呈现，整理效果看起来非常简洁大气。。。
实现功能的jquery代码如下：
$(function(){
var aSlidePage = $('#slide .slide-nav-box a');
var aSlideCon = $('#slide .slide-box li');
var iSize = aSlideCon.size();
var iNow = 0;
var timer = null;
aSlidePage.each(function(index){
$(this).mouseover(function(){
iNow = index;
slideRun()
})
})
function slideRun(){
aSlidePage.removeClass('active');
aSlidePage.eq(iNow).addClass('active');
aSlideCon.stop();
aSlideCon.find('b').stop();
aSlideCon.eq(iNow).siblings().animate({
opacity:0
},600).find('b').animate({
opacity:0,
top:-40
},600);
aSlideCon.eq(iNow).animate({
opacity:1
},600).find('b').animate({
opacity:1,
top:-10
},600);
}
autoRun();
function autoRun(){
timer = setInterval(function(){
iNow++;
if(iNow>iSize-1) iNow=0;
slideRun();
},2000)
};
$('#slide').hover(function(){
clearInterval(timer);
},function(){
autoRun();
})
})
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友czqn8 滚动特效 幻灯片 图片滚动 图片轮播 图片播放 滑动插件 Jquery焦点图 图片全屏显示