发布时间 : 星期日 文章仿淘宝商城天猫首页jQuery多格焦点幻灯图特效代码更新完毕开始阅读9a16308b02d276a200292e2a
仿淘宝商城天猫首页jQuery多格焦点幻灯图特效代码
今天在蓝色经典论坛与大家讨论了一下淘宝商城焦点图效果。在上个实例《jQuery淘宝商城多格焦点图效果》中没有能完美地仿出来。问题出在自动播放到最后一张图切换第一张图时，淘宝的效果是继续向右滚动，相比之下上例的效果就比较简单粗暴了。所以今天看到蓝色的“tangbao510”童鞋在求教这个问题就参与了讨论，然后终于想通了怎么来实现。
基于上例的代码做出的小改进，所以本例只说明一下有变化的部分，演示页面中有全部的代码注释。
第五张切换至第一张依然向右滚动的情况只出现在自动播放的情况下，所以需要调整的就是setInterval()中的函数。先对索引值进行判断，如果已播放到最后一张：{??}，其它情况：{??}。
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 $(\ clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零 showFirPic();
index = 0;
} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics() showPics(index); }
index++;
},3000); //此3000代表自动播放的间隔，单位：毫秒
}).trigger(\
为最后一张图片自动切换至第一张图片添加特殊处理函数：showFirPic()。
function showFirPic() { //最后一张图自动切换到第一张图时专用 $(\
var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
$(\ //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
$(\ $(\ });
$(\.btn span\//为第一个按钮添加选中的效果
}
由于外围ul的宽度是根据子元素个数来计算的，我们在播放到最后一张图时会复制一张图出来，因此需要为ul再增加一个li元素的宽度。
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$(\
最后感谢一下蓝色上参与讨论的各位前辈、童鞋们。实现方法多种多样，我从前面的焦点图实例一路做下来，感觉这个比较简单容易掌握，如果大家有更强大的方法记得拿出来分享哦。
仿QQ商城焦点图jquery幻灯特效代码
焦点图花样繁多，最普通的就是图片加下面一排数字按钮了。这样的在前面已经做过几个，再有的变化就只是样式上的，结构和实现方法没有大的不同，就不浪费各位看客的时间了。以后也尽量会找一些新鲜、不常见的效果来仿。比如今天的QQ商城焦点图，它包含的“上一页”、“下一页”两个功能按钮，在之前是没有做过的，我们一起来看一下。
可以看到，除了“上一页”、“下一页”按钮外，其它均和以前的实例相仿，所以结构还是我们的“焦点图万能结构”，按钮就交给jQuery来完成。 HTML结构
//出镜率很高的简单结构，“焦点图万能结构”有木有
jQuery代码
btn += \是之前实例中定义过的，在这里追加俩按钮 //上一页、下一页按钮透明度处理
$(\
$(this).stop(true,false).animate({\鼠标移入透明度变为0.5
},function() {
$(this).stop(true,false).animate({\鼠标移入透明度变为0.2 });
//上一页按钮
$(\
index -= 1; //下一页按钮，鼠标点击后先让index值加1
if(index == -1) {index = len - 1;} //如果index-1后的值为-1，说明当前图片index是0，即第一张图片，那么接下来就该显示最后一张图片，即index值为len-1 showPics(index); //根据索引值显示相应图片，下同 });
//下一页按钮
$(\
index += 1; //上一页按钮，鼠标点击后先让index值减1
if(index == len) {index = 0;} //如果index+1后的值为图片个数，说明当前图片index是len，即最后一张图片，那么接下来就该显示第一张图片，即index值为0 showPics(index); });
这里只有增加的两个按钮的相关代码，其它部分和以前实例相同，这里也不再列出，完整代码可以查看演示页源文件。
焦点图常用的也就这几种形式了，结构和实现方法贴得比较乏味，以后差不多的例子就直接上演示页不解释??
网络游戏充值类首页全套免费模板