jquery之图片左右切换动画效果

这篇文章发布于 2009年08月31日,星期一,01:04,归类于 jQuery相关。 阅读 53448 次, 今日 12 次 13 条评论

 

我很喜欢jQuery,因为我发现只要我对css的了解的足够深入,即使我JavaScript不是很在行,一样能做出些不错的动画效果。

这里所要展示的是很常见的一种JavaScript交互效果,点击预览图,可以查看大图,大图和大图之间是以滑动效果进行切换的。一般这种效果实现大致原理是一样的,具体实现可能有差异,如果纯粹的JavaScript写,我估计要整好一会儿,但是使用jQuery,实现这类动画效果就像是踩棉花一样——松松的。

以下就是效果截图:

jQuery图片左右切换动画效果页面截图

效果描述就是:您单击上面的小图,下面的大图就会迅速切换到对应的大图,效果酷就酷在一系列大图整体移动切换。

jQuery代码如下:

$(".pic_small").find("img").click(function(){
    $(".pic_small").find("img").not($(this)).removeClass("current");
    $(this).addClass("current");
    $(this).parent().blur();
    var picNum = parseInt($(this).parent().attr("href").slice(1));
    var movePos = ($('#pic_chg_area li').width()*(-picNum));
    $("#pic_chg_area").animate({left:movePos},500);
});

源文件下载:单击这里(右键另存为就可以了)

您可以狠狠地单击这里:图片滑动切换效果demo

最后还是提一下关键的原理吧:
一个长长的绝对定位层,放了5张大图,但是由于其父<div>宽度定死,且溢出隐藏,所以你只看到父<div>宽度显示的部分。然后通过js控制这个长长的绝对定位层的移动,就可以实现图片左右切换的效果了。至于具体细节,还得由您慢慢体味了!

(本篇完)

分享到:1
×


发表评论(目前13 条评论)

  1. 夏日沫沫说道:

    呜呜打不开啊

  2. 柠檬树说道:

    demo看不见了。浏览器404.望楼主有空更新一下把。

  3. yoomin说道:

    貌似很多banner图就是这么实现的……
    自己五月初的时候也写了一个
    原来你七年前就开始研究这些东西了
    不过目前无限轮换的banner还在研究中。

  4. adeng说道:

    404了呀,哥哥

  5. 夜来香说道:

    木有了呢?哥哥,哈哈,希望补上.

  6. 说道:

    为什么,我把你的图片换了。运行之后却不能显示图片呢。?

  7. 看过说道:

    在 JavaScript Dom 变成艺术里面有这个,但是大图轮换需要自己该一下

  8. zlart说道:

    文件404了

  9. 蜗牛说道:

    文件404了/baiy

  10. zhangzhang说道:

    下载文件压缩失败了。。。

  11. 小默说道:

    下载文件没有了

  12. 交朋友说道:

    你好!我最近看了你做的网站,很崇拜你,希望能和你交个朋友,上面是我的邮箱,很期待你的回复!我最近也在学习jquery,正在做一个网站的注册页面!期待。。。。。。