网格中的随机标志

我想在jQuery中创建一个徽标的“墙”，就像在https://www.squarespace.com/网站上的“TRUSTED BY THE WORLD'S BEST”部分所示。网格中的随机标志

同样的事情：8个标志与淡入淡出。

我可以帮忙吗？

<div class="client-logos-grid"> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
     <a href="" class="client-logo"><img src="" alt=""></a> 
</div>

我开始使用此：https://jsfiddle.net/vc43mzxL/1/

$('document').ready(function() { 

    var curIndex = 0; 
    var src = ['http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg']; 
    var fadeTimeInMilliseconds = 2000; 
    var waitTimeInMilliseconds = 5000; 

    $(document).ready(function() { 
    switchImageAndWait(true); 
    }); 

    function switchImageAndWait(fadeOut2) { 
    if (fadeOut2) { 
     setTimeout(fadeOut, waitTimeInMilliseconds); 
    } else { 
     var index = Math.floor((Math.random() * src.length)) 
     if (curIndex == index) { 
     index++; 
     if (index >= src.length) { 
      index -= 8; 
     } 
     } 
     curIndex = index; 
     $(".client-logo img").attr("src", src[index]); 
     fadeIn(); 
    } 
    } 

    function fadeOut() { 
    $(".client-logo img").fadeTo(fadeTimeInMilliseconds, 0, function() { 
     switchImageAndWait(false); 
    }); 
    } 

    function fadeIn() { 
    $(".client-logo img").fadeTo(fadeTimeInMilliseconds, 1, function() { 
     switchImageAndWait(true); 
    }); 
    } 

});

来源

2017-07-25 Jandon

看起来你忘了添加你的JS代码..？ – Teemu

你需要提供你的js代码 –

@CBroe是的，但我的评论是更有礼貌的方式来表达这个想法。最终似乎是一个错误的假设，OP似乎有一个尝试。 – Teemu

$(function() { 
 
    //calling every 20 millseconds 
 
    setInterval(function() { 
 
    changeLogo(); 
 
    }, 200); 
 
}); 
 

 
function changeLogo() { 
 
    //taking first active logo 
 
    var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)'); 
 
    var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)'); 
 
    shownLogo.fadeOut(200, function() { 
 
    shownLogo.addClass('hidden'); 
 
    //check if its the last logo in the row 
 
    if (shownLogo.next('.client-logo').length > 0) { // not last 
 
     shownLogo.next('.client-logo').fadeIn(400, function() { 
 
     shownLogo.next('.client-logo').removeClass('hidden'); 
 
     }); 
 

 
    } else { // last 
 
     //move to first 
 
     $('.client-logo:first').fadeIn(400, function() { 
 
     $('.client-logo:first').removeClass('hidden'); 
 
     }); 
 

 
    } 
 
    }); 
 
}

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="client-logos-grid"> 
 
    <a href="" class="client-logo"><img src="" alt="">A</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">B</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">C</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">D</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">E</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">F</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">G</a> 
 
    <a href="" class="client-logo hidden hide"><img src="" alt="">H</a> 
 
</div>

您正在寻找这样的事情？

来源

2017-07-25 09:27:39 gjijo

仍然从A到B的过渡需要比其他更多的时间。我试图把它整理出来。任何来自社区的帮助都会受到欢迎。 – gjijo

对不起，我错过了给第二个锚标签文本。现在更正了。 – gjijo

谢谢！我尝试创建与https://www.squarespace.com相同的系统。 8个标志展示，1个随机取代1个标志 – Jandon

我检查他们的网页，他们使用their custom js为标志转换设置动画效果。

，你还可以通过使用simplefadeslideshow

<div id="slideshow"> 
    <li><a href="link1.html"><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></a></li> <!-- This is the last image in the slideshow --> 
    <li><a href="link2.html"><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></a></li> 
    <li><a href="link3.html"><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></a></li> 
    <li><a href="link4.html"><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></a></li> <!-- This is the first image in the slideshow --> 
</div>

做到这一点，绑定插件已创建

jQuery(document).ready(function(){ 
    jQuery('#slideshow').fadeSlideShow(); 
});

演示网页HTML结构可以看出here希望这有助于

来源

2017-07-25 09:27:50

网格中的随机标志

回答

相关问题