QQ商城jquery焦点图效果实例

很久没有更新了,今天再来做一个2012QQ商城最新jquery焦点图效果

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

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

查看演示页面

焦点图常用的也就这几种形式了,结构和实现方法贴得比较乏味,以后差不多的例子就直接上演示页不解释……
希望很快可以和大家分享更多更高级的jquery实例,学习jquery和js的同学们加油!!!

54173BLOG原创,转载请注明本文链接:http://www.mming.cc/blog/?p=539

更多焦点图效果请查阅:《jQuery入门实例:焦点图特效合辑》

更多jquery相关:jquery特效jquery焦点图jquery选项卡jquery表单验证jquery闪烁字

作者:mming。