網格中的隨機標誌

我想在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

網格中的隨機標誌

回答

相關問題