首页 > 网页特效 > jQuery幻灯 > 仿淘宝商城天猫首页jQuery多格焦点幻灯图特效代码

仿淘宝商城天猫首页jQuery多格焦点幻灯图特效代码

时间：2012-03-01 来源：54173BLOG

今天在蓝色经典论坛与大家讨论了一下淘宝商城焦点图效果。在上个实例《jQuery淘宝商城多格焦点图效果》中没有能完美地仿出来。问题出在自动播放到最后一张图切换第一张图时，淘宝的效果是继续向右滚动，相比之下上例的效果就比较简单粗暴了。所以今天看到蓝色的“tangbao510”童鞋在求教这个问题就参与了讨论，然后终于想通了怎么来实现。

jquery淘宝商城最新多格焦点图效果

基于上例的代码做出的小改进，所以本例只说明一下有变化的部分，演示页面中有全部的代码注释。

第五张切换至第一张依然向右滚动的情况只出现在自动播放的情况下，所以需要调整的就是setInterval()中的函数。先对索引值进行判断，如果已播放到最后一张：{……}，其它情况：{……}。

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
 clearInterval(picTimer);
},function() {
 picTimer = setInterval(function() {
 if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
 showFirPic();
 index = 0;
 } else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
 showPics(index);
 }
 index++;
 },3000); //此3000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");

为最后一张图片自动切换至第一张图片添加特殊处理函数：showFirPic()。

function showFirPic() { //最后一张图自动切换到第一张图时专用
 $("#focus ul").append($("#focus ul li:first").clone());
 var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
 $("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {
 //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
 $("#focus ul").css("left","0");
 $("#focus ul li:last").remove();
 });
 $("#focus .btn span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
}

由于外围ul的宽度是根据子元素个数来计算的，我们在播放到最后一张图时会复制一张图出来，因此需要为ul再增加一个li元素的宽度。

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len + 1));

最后感谢一下蓝色上参与讨论的各位前辈、童鞋们。实现方法多种多样，我从前面的焦点图实例一路做下来，感觉这个比较简单容易掌握，如果大家有更强大的方法记得拿出来分享哦。

作者/来源：54173BLOG

预览下载收藏分享评论

标签淘宝商城多格焦点幻灯 jQuery幻灯

仿淘宝商城天猫首页jQuery多格焦点幻灯图特效代码

特效推荐

热门特效

频道推荐