首页 > 网页特效 > jQuery幻灯 > 仿QQ商城焦点图jquery幻灯特效代码

仿QQ商城焦点图jquery幻灯特效代码

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

焦点图花样繁多，最普通的就是图片加下面一排数字按钮了。这样的在前面已经做过几个，再有的变化就只是样式上的，结构和实现方法没有大的不同，就不浪费各位看客的时间了。以后也尽量会找一些新鲜、不常见的效果来仿。比如今天的QQ商城焦点图，它包含的“上一页”、“下一页”两个功能按钮，在之前是没有做过的，我们一起来看一下。

jquery QQ商城焦点图效果

可以看到，除了“上一页”、“下一页”按钮外，其它均和以前的实例相仿，所以结构还是我们的“焦点图万能结构”，按钮就交给jQuery来完成。

HTML结构

//出镜率很高的简单结构，“焦点图万能结构”有木有
<div id="focus">
<ul>
 <li><a href="#"><img src="01.jpg" alt="01" /></a></li>
 <li><a href="#"><img src="02.jpg" alt="02" /></a></li>
 <li><a href="#"><img src="03.jpg" alt="03" /></a></li>
 <li><a href="#"><img src="04.jpg" alt="04" /></a></li>
 <li><a href="#"><img src="05.jpg" alt="05" /></a></li>
</ul>
</div>

jQuery代码

btn += "<div class='preNext pre'></div><div class='preNext next'></div>"; //btn是之前实例中定义过的，在这里追加俩按钮
//上一页、下一页按钮透明度处理
 $("#focus .preNext").css("opacity",0.2).hover(function() {
 $(this).stop(true,false).animate({"opacity":"0.5"},300); //鼠标移入透明度变为0.5
 },function() {
 $(this).stop(true,false).animate({"opacity":"0.2"},300); //鼠标移入透明度变为0.2
 });
//上一页按钮
$("#focus .pre").click(function() {
 index -= 1; //下一页按钮，鼠标点击后先让index值加1
 if(index == -1) {index = len - 1;} //如果index-1后的值为-1，说明当前图片index是0，即第一张图片，那么接下来就该显示最后一张图片，即index值为len-1
 showPics(index); //根据索引值显示相应图片，下同
});
//下一页按钮
$("#focus .next").click(function() {
 index += 1; //上一页按钮，鼠标点击后先让index值减1
 if(index == len) {index = 0;} //如果index+1后的值为图片个数，说明当前图片index是len，即最后一张图片，那么接下来就该显示第一张图片，即index值为0
 showPics(index);
});

这里只有增加的两个按钮的相关代码，其它部分和以前实例相同，这里也不再列出，完整代码可以查看演示页源文件。

焦点图常用的也就这几种形式了，结构和实现方法贴得比较乏味，以后差不多的例子就直接上演示页不解释……

作者/来源：54173BLOG

预览下载收藏分享评论

标签 jquery幻灯 jquery焦点图宽屏幻灯