仿QQ商城焦点图jquery幻灯特效代码
时间:2012-03-11 来源:54173BLOG焦点图花样繁多,最普通的就是图片加下面一排数字按钮了。这样的在前面已经做过几个,再有的变化就只是样式上的,结构和实现方法没有大的不同,就不浪费各位看客的时间了。以后也尽量会找一些新鲜、不常见的效果来仿。比如今天的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