Question

jquery js的问题，帮忙看一下，有20个div，每个div里都有多张图片，每个里的图片数量

jquery js的问题，帮忙看一下，有20个div，每个div里都有多张图片，每个里的图片数量是不一样的，问题：让每个div里的图片淡入淡出的切换，但不要让全部div都同步这样，要让这20个div随机这样，
一次三个div同时做这样的事情，这三个div可以不是相邻的，这是其中的一个div:
<div class="item"><a href="case_show.html" target="_blank"><img src="images/case4.jpg" alt="这里是图片对应的描述文字内容"><img src="images/case2.jpg" alt="这里是图片对应的描述文字内容"><img src="images/case.jpg" alt="这里是图片对应的描述文字内容">
<p class="show_title">中文项目名称</p></a>
</div>
要帮忙把代码写一下哦

Answer 1

我只提供个思路。可以做个定时器。然后用random随机取0-19的数字。这样就随机取出20个div里的一个了。

追问

我知道怎么在20个里随机出一个，但是不只是随机啊，还有要它下面的图片淡入淡出显示， 也不是随机一个一次，一次要3个div同步做这样的事情

追答

你3个div同步。反正循环只循环3次就可以了。至于图片怎么显示。没懂你的意思。

追问

有20个这样class="item"的div,想让每个item里面的图片淡入淡出的切换显示，但是不要让全部item都同一时间这样做，因为这样看上去一大片都在同时切换，要随机的几个item这样做，或是相邻的三个这样做，等这三个完了后，其它的才开始，就是时间上不要同步，三个三个的来，这三个完了后那三个才开始

追答

就是我上面说的可以做到啊。。你有什么疑问。。定时器取3个随机div。将每个div的图片切换就是了。

追问

我可以做到三个的其它操作，但是三个里面的图片要切换，而且每个里面的图片数量是不一样的， 我只能做到一个这样，或全部的都这样 ，另个定时器取3个随机div怎么弄啊，能帮忙写一下吗

追答

帮你写。。。。

我写出来对你技术就没帮助了。。我再说仔细点。。你好像不熟悉jquery。。。

1：设置定时器。setTimeout(事件,10000)

2：
var num= parseInt(19*Math.random()) //0-19随机数
for(var i=0;i<20;i++){
$(".item")[num] //随机取出一个div
//显示图片 $(".item img")这也是个循环。

}
//循环完了就clearTimeout定时器。然后再setTimeout(事件,10000)

追问

你确定上面的可以？我现在只做到了要么一个这样，要么全部都这样， 没做到三个三个的来，这三个完了那三个开始

追答

我确定我的思路是可以完成你的需求的。做不到请找我。。。

有没有更方便的我就不知道了。你能最到1个就肯定能做到多个。3个轮流定时可以搞定呢。

Answer 2

$("#id").delay(1000).fadeIn();

给每个div加上不同的delay，这样淡入淡出就不同步了。视觉效果上就是你说的随机淡入。

至于要实现真正的随机，那就把delay的值写成随机数，问题是没有必要那么复杂。

Answer 3

楼上的回答貌似会让相邻的div切换到…不过也可以实现。
我觉得你的布局是要做出瀑布流的效果吗？
是要3个3个切换所有的div里面的图片？还是只用随机就可以了？

追问

多个div，每个div里的图片数量不一样，要一次三个div切换一下它里面的图片，切换一张，接着下三个div也这样，就是一次三个相邻div在动作，只切换它里面的一张图，下回轮到它时再接着切换它的第二张图，到底是那三个相邻的div要动作是随机的

追答

Div到底相邻不相邻啊……

给个思路

HTML

<div class="parent-container">
    <div class="item" id="child-one">
        <a href="case_show.html" target="_blank">
            <img src="images/case4.jpg" alt="这里是图片对应的描述文字内容">
            <img src="images/case2.jpg" alt="这里是图片对应的描述文字内容">
            <img src="images/case.jpg" alt="这里是图片对应的描述文字内容">
            <p class="show_title">中文项目名称</p>
        </a>
    </div>
    //...后面省略19个
</div>

追问

相邻三个，

这是啥？这么说吧，看这个，http://www.zaha-hadid.com/publications/ 它是一次全部的div都在动作，我只要一次三个，这三个完了那三个才开始，到底是哪三个要随机

追答

我刚刚出问题了提早提交了……JS的代码没写完…我先继续

 JavaScript

$document.ready(function(){
    var doc = $(".parent-container").children();
    //取得所有的有图片的div,doc是一个含有多个object的数组
    function init(){
        t=setTimeout("init()",2000);//2秒
        switch();
    }
    //2秒循环，调用本身并且调用一个叫做switch的函数
    function switch(){
        if(doc!=null&&doc.length!=0)//判断长度是否不为零，是否取到了所有的dom
        {
            var num = parseInt(doc.length*Math.random()-1);
            for(i=0;i<3;i++)
                changePicture(doc[num+i]);
                /*!important 这边可以写一个从doc里面抽取掉已经切换过的dom,但是比较麻烦，既然你没有要求，我就先不写了。加上这个可以避免重复*/
            //你说你能实现一个的图片切换，那么就把代码放到这个changePicture里面
        }else
        {
            if(doc.length=0)
                var doc = $(".parent-container").children();
            console.err("unable load div");
        }
    }
});

额……百度出bug了

追问

你测试可以？

追答

changePicture的代码我释放给你来实现的，dom树部分测试没问题。
当然，具体的细节肯定要按你自己来修改…我只是提供方法而已。

追问

我可以得到一个随机的相邻的三个div,也可以让这三个div里的图片淡入淡出切换，但是现在情况是这三个div里的图片全部切换完了一遍才跳出，完了接着另三个div开始动作（做同样的事情），做不到每次的三个div只切换一张图片，等再轮到它们了再切换第二张 。。下次再第三张这样

追答

问题出在div切换的js里面咯？
你能把代码发上来么，我可以帮你找bug.

追问

能不能帮忙写一个完整的？

追答

代码发给我我私信邮箱给你了

追问

发过去了，

Answer 4

朋友我推荐你要是要制作网页，最好用dreamweverCS5那个软件，很方便，不用输入代码，直接制作，自己会出代码，而且也可以帮助你学习代码。希望能帮到你。

追问

你说的是啥啊

答非所问

Answer 5

我也需要这个代码，能给我一下吗