Javascript旋转木马，显示随机div并每3秒更改一次

我正在尝试创建一个Javascript旋转木马，它显示一个随机div，并每3秒更改一次

我有随机div在加载时显示，但不确定要添加什么，请将其更改为下一个

var elems=$（“div”）；
if（元素长度）{
var keep=Math.floor（Math.random（）*elems.length）；
对于（变量i=0；i

这是内容1
这是内容2
这是内容3
这是内容4
这是内容5
这是内容6

将代码按如下间隔放置：

setInterval(function(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
},1000); // change every 1s ;

.hide-at-start
{
    display:none;
}

 function showRandomDiv(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
 }

 showRandomDiv();   // runs once

 setInterval(showRandomDiv,1000); // change every 1s ;

@keyframes fade-in-from-left {
    0% {left: 0px;opacity: 0;}
    50% {left: 20px;opacity: 0.5;}
    100%{left:0px;opacity: 1;}
}


.fade-in-from-left{
    position: relative;
    animation: fade-in-from-left 0.5s forwards;
}

<div class="hide-at-start fade-in-from-left">This is content 1</div>
<div class="hide-at-start fade-in-from-left">This is content 2</div>
<div class="hide-at-start fade-in-from-left">This is content 3</div>
<div class="hide-at-start fade-in-from-left">This is content 4</div>
<div class="hide-at-start fade-in-from-left">This is content 5</div>
<div class="hide-at-start fade-in-from-left">This is content 6</div>

并将其添加到divs：

<div id="content1" class="hide-at-start">This is content 1</div>
<div id="content2" class="hide-at-start">This is content 2</div>
<div id="content3" class="hide-at-start">This is content 3</div>
<div id="content4" class="hide-at-start">This is content 4</div>
<div id="content5" class="hide-at-start">This is content 5</div>
<div id="content6" class="hide-at-start">This is content 6</div>

然后将左渐入添加到您的div中，如下所示：

setInterval(function(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
},1000); // change every 1s ;

.hide-at-start
{
    display:none;
}

 function showRandomDiv(){
    var elems = $("div");
    if (elems.length) {
      var keep = Math.floor(Math.random() * elems.length);
      for (var i = 0; i < elems.length; ++i) {
        if (i !== keep) {
          $(elems[i]).hide();
        }
        else{
          $(elems[i]).show();
        }
      }
    }
 }

 showRandomDiv();   // runs once

 setInterval(showRandomDiv,1000); // change every 1s ;

@keyframes fade-in-from-left {
    0% {left: 0px;opacity: 0;}
    50% {left: 20px;opacity: 0.5;}
    100%{left:0px;opacity: 1;}
}


.fade-in-from-left{
    position: relative;
    animation: fade-in-from-left 0.5s forwards;
}

<div class="hide-at-start fade-in-from-left">This is content 1</div>
<div class="hide-at-start fade-in-from-left">This is content 2</div>
<div class="hide-at-start fade-in-from-left">This is content 3</div>
<div class="hide-at-start fade-in-from-left">This is content 4</div>
<div class="hide-at-start fade-in-from-left">This is content 5</div>
<div class="hide-at-start fade-in-from-left">This is content 6</div>

这是内容1
这是内容2
这是内容3
这是内容4
这是内容5
这是内容6

干净简单的解决方案。谢谢！你能推荐一种方法来防止在JS实现之前显示所有加载项吗？@Rob，不客气。我在更新部分中添加了解决方案是的。这是一个很好的解决方案。谢谢again@Rob随时可以，兄弟。