2009.03 10

jQuery Slide Show – jQuery幻灯片效果

标签: ,
Featured, jQuery

又一个星期没更新了，本来昨晚就想写篇博客，顺便检验一下自己的jQuery学习成果。不过，写了好久，没有看书，还是写不了。今天，看了这篇文章（其实，就是抄了他的思路），才写出一个jQuery SlideShow。

相关内容：预览/Demo ｜ jQuery-SlideShow.zip

制作的主要原理是，利用绝对定位，把所有图片都重叠在一起。再利用jQuery让图片动态交换，并调整他们的z-index。主要的js代码如下：

function slideSwitch() {
var $current = $("#slideshow div.current");
// 判断div.current个数为0的时候 $current的取值
if ( $current.length == 0 ) $current = $("#slideshow div:last");
// 判断div.current存在时则匹配$current.next(),否则转到第一个div
var $next = $current.next().length ? $current.next() : $("#slideshow div:first");
$current.addClass('prev');
$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
$current.removeClass("current prev");
});
} $(function() {
$("#slideshow span").css("opacity","0.7");
$(".current").css("opacity","1.0");
// 设定时间为3秒(1000=1秒)
setInterval( "slideSwitch()", 3000 );
});

而在HTML要注意的是，记得为第一个#slideshow里面的第一个DIV加上class="current"。如果你有更好的制作Slide Show的方法，欢迎拿来大家一起探讨。

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Featured, jQuery »

56

  1. 2009.03.10 2:01 pm
    Leeiio(visit): [回复]

    终于写出来了哈~

  2. 2009.03.10 2:02 pm
    雀巢(visit): [回复]

    不错，很赞

  3. 2009.03.10 2:03 pm
    herb(visit): [回复]

    沙发掉! 代码感觉有一点点啰嗦~哈哈

  4. 2009.03.10 2:04 pm
    herb(visit): [回复]

    寒…

  5. 2009.03.10 2:09 pm
    toydime(visit): [回复]

    手艺日渐搞张，追赶的脚步要加快才行丫

  6. 2009.03.10 2:11 pm
    sofish(visit): [回复]

    @Leeiio: 不容易啊=,=…

    @雀巢: 谢谢！！！

    @herb: 新手新手，多指教啊!

    没想到沙发这么快！

    @toydime: 哈哈，需要不断充电，更新嘛。

  7. 2009.03.10 2:17 pm
    leehow这个VIP(visit): [回复]

    小朋友，上班还习惯吗，加油加油。

  8. 2009.03.10 2:31 pm
    yinheli(visit): [回复]

    学习了…不错呀.这个算是简单的实现办法了.果然是CSS高手

  9. 2009.03.10 2:32 pm
    sofish(visit): [回复]

    @leehow这个VIP:谢谢，加油。 上班挺好的。早起（其实已经8:00）也习惯了。

  10. 2009.03.10 2:33 pm
    sofish(visit): [回复]

    @yinheli: …jQuery优先=,=…

  11. 2009.03.10 2:52 pm
    囧囧有神的(visit): [回复]

    我们摊的jquery已经成灾了，
    我已经有1年度多没有写过正经的JS了T_T

  12. 2009.03.10 3:08 pm
    welee(visit): [回复]

    写文章中，没空仔细看，先来占个位，晚点再细细拜读 @sofish 的大作…

  13. 2009.03.10 3:10 pm
    nil(visit): [回复]

    前一阵在公司里头讲 css，不想做 ppt，就用 jQuery 也实现了一个简易的，不晓得有 .next() 函数，还用 index(), nth-child() 之类很猥琐得算来算去。

    还顺便实现了个 table of content。哈哈

  14. 2009.03.10 3:37 pm
    爱月(visit): [回复]

    完全。。。不懂。。。飘。。。

    PS：沉静了近一个月的爱月重回网络重拜各位好友ing～

  15. 2009.03.10 6:21 pm
    老所(visit): [回复]

    好东西，不过有个疑问：为什么你代码不缩进呢？看起来很累：）

  16. 2009.03.10 6:28 pm
    会律博客(visit): [回复]

    地板加占位！

  17. 2009.03.10 7:24 pm
    nooidea(visit): [回复]

    我打算用 google picasa slides 也还很方便好看的阿～～

    不过类似lightview 的功能还是很喜欢的 我的到现在也就只能实现单独图片lightview 不能像别人那样一篇文章好几个图片可以点击下一张显示。。。 不知怎么回事

  18. 2009.03.10 9:48 pm
    Lorz(visit): [回复]

    不错～才10几行代码。可以了～

  19. 2009.03.10 10:20 pm
    hoorace(visit): [回复]

    找个机会用mootools改版一下这个方法。

  20. 2009.03.10 11:21 pm
    老时(visit): [回复]

    很久没来了

  21. 2009.03.11 9:13 am
    Lok(visit): [回复]

    如果有选择按钮就好了

  22. 2009.03.11 10:09 am
    1234(visit): [回复]

    很佩服你的学习新知识的精神啊，如果我也能够象你一样埋头学习的话就很好了。

  23. 2009.03.11 10:24 am
    小朋友说(visit): [回复]

    最好是加个上一张，下一张可手动控制的事件

  24. 2009.03.11 1:14 pm
    Flyb(visit): [回复]

    刚好要这样的效果!
    大小直接改那个高度，宽度就好咯。

  25. 2009.03.11 1:42 pm
    jeans(visit): [回复]

    请问有没有为已上传图片加水印的插件？就是不用再下载到本地加水印了。谢谢！

  26. 2009.03.11 9:07 pm
    welee(visit): [回复]

    代码很简洁易懂，jQuery 效果真的不错，学习学习。

  27. 2009.03.12 2:54 pm
    salang(visit): [回复]

    纯顶···
    这个东西太高深了啊··

  28. 2009.03.12 8:48 pm
    小墨(visit): [回复]

    路过～～路过～～路过～～路过～～

  29. 2009.03.12 11:23 pm
    芒果(visit): [回复]

    看不懂的才是好东西

  30. 2009.03.13 1:16 am
    皇冠平台(visit): [回复]

    晚上睡不着，就过来看看，按着你的方法试了一下，效果很好，不过，让我调试了很久

  31. 2009.03.13 3:03 am
    oneway(visit): [回复]

    挺好得

  32. 2009.03.13 9:43 am
    jeans(visit): [回复]

    代码这东西，偶不懂！

  33. 2009.03.13 6:21 pm
    seavin(visit): [回复]

    成长的真快……

  34. 2009.03.14 10:11 pm
    aunsen(visit): [回复]

    有人能做个插件，后台可以自定义大小更换图片和文字链接等就好了！

  35. 2009.03.15 10:55 am
    hiphone(visit): [回复]

    完全不懂

  36. 2009.03.15 2:42 pm
    zhouge(visit): [回复]

    Sofish 小盆友，教一下你的博客 RSS 订阅那里的 jQuery 效果是怎么做的呗。
    刚才也 Google 了一下，可是自己没有做成功。
    谢啦。

  37. 2009.03.15 4:13 pm
    sofish(visit): [回复]

    @zhouge: 我等下忙完写一个发上来…

  38. 2009.03.15 5:27 pm
    zhouge(visit): [回复]

    @sofish: 谢谢 sofish.

  39. 2009.03.16 10:52 am
    小默(visit): [回复]

    如果能有个“1 2 3 4”的选择按钮就更好了。

  40. 2009.03.17 2:19 pm
    Hui(visit): [回复]

    注释很详细~　学习了~

  41. 2009.03.18 12:38 pm
    billknow(visit): [回复]

    @小默:

    for(var i=0;i<length;i++){
    $(“.menu”).append(““+(i+1)+”“);
    }

    $(“li a”).click(function(){
    var value=$(this).text();
    $current = $(“#slideshow div.current”);
    $current.removeClass(“current prev”);
    $(“#slideshow div “).eq(value-1).addClass(“current”);
    });

  42. 2009.03.18 1:39 pm
    sofish(visit): [回复]

    @billknow: bill是好孩子。

  43. 2009.03.18 4:27 pm
    wenner(visit): [回复]

    有点小问题,SPAN下面的图片显示的是下一张的…这怎么解决??

  44. 2009.03.20 5:20 pm
    niceidea(visit): [回复]

    Very good indeed!
    Thanks.
    非常感谢

  45. 2009.03.23 10:45 pm
    美女(visit): [回复]

    谢谢分享~!

  46. 2009.03.24 4:07 pm
    电影天堂(visit): [回复]

    好东西，不得不收藏！

  47. 2009.04.01 8:27 am
    飞翔的鱼(visit): [回复]

    如果想实现鼠标hover时图片停止变化，要怎么样啊？

  48. 2009.04.10 11:42 am
    WordPress啦(visit): [回复]

    有空研究下代码，丰富的页面特效，在一定程度上也能吸引不是用户啊

  49. 2009.04.15 10:32 am
    overlimix(visit): [回复]

    in english plizz

    谢谢分享~!

  50. 2009.04.21 9:41 pm
    seri(visit): [回复]

    还是用的flash版本，觉得相对快一点

  51. 2009.05.10 4:40 pm
    永远的冰点(visit): [回复]

    这个很不错，正找着!

  52. 2009.05.12 11:05 pm
    xsir317(visit): [回复]

    真漂亮～赞美一下～

  53. 2009.06.17 9:35 pm
    凯尔(visit): [回复]

    好久没来了，看了你做的这个，我想我原来的showcase可以改动一下了。

  54. 2009.06.18 2:47 pm
    凯尔(visit): [回复]

    不过我很不喜欢在js的变量名前加”$” （$current），请教一下这是不是有什么特别的用法；还是说，这是一种和PHP变量的混淆。

  55. 2009.06.24 11:17 pm
    skone(visit): [回复]

    能不能简化一下，给我这个菜鸟，让我在wordpress上享受一下。

  56. 2010.02.28 1:56 pm
    AnQ(visit): [回复]

    这个很不错，这在找这方面的东西呢

Additional comments powered by BackType