随机化图像淡入

时间:2015-08-19 00:57:11

标签: javascript jquery html css twitter-bootstrap

任何人都可以帮我解决我的问题。 我有一个5个图像(设置在一个特定的位置)使用bootstrap然后我希望它有一个动画特定一个FADE动画页面加载这里是我的标记和js和它的工作正常但我想要我图像随机显示任何人都可以帮助我。

$(function () {
            $('#fds img').each(function (i) {
               $(this).delay((i++) * 1000).fadeTo(2000, 1);
            })
        });
 <div id="fds">
        <div class="col-md-12 margin-b-2" style="padding-left: 0; padding-top: 20px">
            <div class="com-sm-6 col-md-3">
                <img id="img1" class="thumbnail" src="../img/1.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg1();" />
            </div>
            <div class="com-sm-6 col-md-3">
                <img id="img2" class="thumbnail" src="../img/2.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg2();" />
            </div>
            <div class="com-sm-6 col-md-3">
                <img id="img3" class="thumbnail" src="../img/3.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg3();" />
            </div>
            <div class="com-sm-6 col-md-3">
                <img id="img4" class="thumbnail" src="../img/4.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg4();" />
            </div>
        </div>
        <div class="col-md-12">
            <img id="img5" class="thumbnail" src="../img/5.png" alt="Alternate Text" style="padding-left: 10px; padding-right: 10px" height="300" width="1350" onclick="javascript:modalImg5();" />
        </div>
    </div>

1 个答案:

答案 0 :(得分:1)

$(function() {
      function Shuffle(o) {
        for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
      }; //stole...borrowed from CSS tricks!
      rand = [];
      $('#fds img').each(function(i) {
        rand.push(i);
      })
      Shuffle(rand);
      for (i = 0; i < rand.length; i++) {
        $('#fds img').eq(rand[i]).delay(i * 1000).fadeTo(2000, 1);
      }
    });

演示: http://jsfiddle.net/rdc47yqL/

因此,进程是:获取图像索引,将它们放在数组中,随机化/随机数组),遍历随机数组, 并使用eq()选择器来定位图像。