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

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

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=100

我很喜欢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控制这个长长的绝对定位层的移动，就可以实现图片左右切换的效果了。至于具体细节，还得由您慢慢体味了！

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=100

（本篇完）