Question

我想在jQuery中创建一个徽标的“墙”，就像https://www.squarespace.com/网站上的“全球最值得信赖”部分一样。

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

我可以帮忙吗？

[training@localhost ~]$ crontab -l
40 3 * * * /home/training/Abhijit_Local/trip_crontab.pig

我从这开始：https://jsfiddle.net/vc43mzxL/1/

 <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>

Answer 1

＆＃13;

$(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');
      });

    }
  });
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

你在找这样的东西吗？

Answer 2

我检查他们的网页，并使用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>

并将插件绑定到您创建的HTML结构

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

可以看到演示网here希望这有帮助

网格中的随机徽标

2 个答案: