首页 > 网页特效 > 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

分类导航

特效推荐

热门特效

热门教程