Question

我想像这样创建一个客户的徽标墙：https://www.squarespace.com/向下滚动，直到“被世界上最好的信任”部分。

为了创建相同的效果，我开始生成一个包含8个元素的列表，然后在我的列表中放入一个数组中的随机src图像后：https://jsfiddle.net/Xroad/avn64tw0/6/

之后，我试图随机改变一个图像： https://jsfiddle.net/Xroad/avn64tw0/8/

我不知道如何只改变一张随机图像？并且在从底部到顶部添加小移动效果之后。

HTML

<div class="list-items"></div>

CSS

.list-items {
    max-width: 500px;
}

.item {
    display: inline-block;
    float: left;
    margin: 10px;
    height: 100px;
    width: 100px;
    line-height: 100px;
    background-repeat: no-repeat;
    background-size: cover;

    img {
        display: inline-block;
        width: 100%;
        height: auto;
        max-height: 100%;
        vertical-align: middle;
    }
}

JQUERY

// List of images //
var logos = ["http://wallpaper-gallery.net/images/image/image-1.jpg", "http://wallpaper-gallery.net/images/image/image-2.jpg", "http://wallpaper-gallery.net/images/image/image-3.jpg", "http://wallpaper-gallery.net/images/image/image-4.jpg", "http://wallpaper-gallery.net/images/image/image-5.jpg", "http://wallpaper-gallery.net/images/image/image-6.jpg", "http://wallpaper-gallery.net/images/image/image-7.jpg", "http://wallpaper-gallery.net/images/image/image-8.jpg"];

// Generate 8 items //
var i;
for (i = 0; i < 8; ++i) {
    $(".list-items").append('<a href="" class="item"><img src="" alt=""></a>');
}

// Shuffle function //
function shuffle(o) {
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

logos = shuffle(logos);

// Push src in image tags //
$('.item img').each(function(i) {
    $(this).attr('src', logos[i]);
});

// Change one image after the other //
count = 0;
  setInterval(function () {
    count++;
    $(".item img").fadeOut(600, function () {
      $(this).attr('src', logos[count % logos.length]).fadeIn(600);
    });
 }, 5000);

“更改图像”部分不能像我想的那样工作，它会改变所有图像，而我希望一个图像接一个。

更新

在@ChrisG的帮助下，我得到了一张随意改变的图像，但有时我得到了重复的图像。

https://jsfiddle.net/Xroad/avn64tw0/11/

更改列表中的一个随机图像

0 个答案: