jQuery幻灯片需要时间加载

时间：2018-09-04 06:43:15

标签： javascript jquery html css

我正在使用7个jQuery函数在一页中运行7个不同时间间隔的幻灯片。

加载所有功能需要时间间隔的最大值（6s）。

有人可以指导我如何使其独立吗？

下面是JS代码。

$(function fn1() {
  $(".class1 img:gt(0)").hide();
   setInterval(function fn1() {
    $(".class1 :first-child")
     .fadeOut(2500)
     .next("img")
     .fadeIn(2500)
     .end()
     .appendTo(".class1");
    }, 5000);
});

$(function fn2() {
  $(".class2 img:gt(0)").hide();
   setInterval(function fn2() {
    $(".class2 :first-child")
     .fadeOut(2750)
     .next("img")
     .fadeIn(2750)
     .end()
     .appendTo(".class2");
    }, 5500);
});

$(function fn3() {
  $(".class3 img:gt(0)").hide();
   setInterval(function fn3() {
    $(".class3 :first-child")
     .fadeOut(3000)
     .next("img")
     .fadeIn(3000)
     .end()
     .appendTo(".class3");
    }, 6000);
});

$(function fn4() {
  $(".class4 img:gt(0)").hide();
   setInterval(function fn4() {
    $(".class4 :first-child")
     .fadeOut(2500)
     .next("img")
     .fadeIn(2500)
     .end()
     .appendTo(".class4");
    }, 5000);
});

$(function fn5() {
  $(".class5 img:gt(0)").hide();
   setInterval(function fn5() {
    $(".class5 :first-child")
     .fadeOut(3000)
     .next("img")
     .fadeIn(3000)
     .end()
     .appendTo(".class5");
    }, 6000);
});

$(function fn6() {
  $(".class6 img:gt(0)").hide();
   setInterval(function fn6() {
    $(".class6 :first-child")
     .fadeOut(2000)
     .next("img")
     .fadeIn(2000)
     .end()
     .appendTo(".class6");
    }, 4000);
});

$(function fn7() {
  $(".class7 img:gt(0)").hide();
   setInterval(function fn7() {
    $(".class7 :first-child")
     .fadeOut(2750)
     .next("img")
     .fadeIn(2750)
     .end()
     .appendTo(".class7");
    }, 5500);
});

在CSS中，我给出了图像的显示值，没有显示值。因此，当函数以最大时间间隔值（6s）加载时，整个页面保持空白，这是不希望的。我希望它可以立即加载，而不管setInterval的值如何。

有人可以指导我吗？

1 个答案:

答案 0 :(得分：0)

假设：

  • 代替 setInterval 更好地使用 setTimeout
  • 这使得可以从（）
    • 一开始就触发它 

$(function fn1() {
  $(".class1 img:gt(0)").hide();
  (function foo1() {
    $(".class1 :first-child")
    .fadeOut(2500)
    .next("img")
    .fadeIn(2500)
    .end()
    .appendTo(".class1");
    setTimeout(foo1, 5000);
  })();
});

$(function fn2() {
  $(".class2 img:gt(0)").hide();
  (function foo2() {
    $(".class2 :first-child")
    .fadeOut(1)
    .next("img")
    .fadeIn(1)
    .end()
    .appendTo(".class2");
    setTimeout(foo2, 5500);
  })();
});

$(function fn3() {
  $(".class3 img:gt(0)").hide();
  (function foo3() {
    $(".class3 :first-child")
    .fadeOut(3000)
    .next("img")
    .fadeIn(3000)
    .end()
    .appendTo(".class3");
    setTimeout(foo3, 6000);
  })();
});

$(function fn4() {
  $(".class4 img:gt(0)").hide();
  (function foo4() {
    $(".class4 :first-child")
    .fadeOut(2500)
    .next("img")
    .fadeIn(2500)
    .end()
    .appendTo(".class4");
    setTimeout(foo4, 5000);
  })();
});

$(function fn5() {
  $(".class5 img:gt(0)").hide();
  (function foo5() {
    $(".class5 :first-child")
    .fadeOut(3000)
    .next("img")
    .fadeIn(3000)
    .end()
    .appendTo(".class5");
    setTimeout(foo5, 6000);
  })();
});

$(function fn6() {
  $(".class6 img:gt(0)").hide();
  (function foo6() {
    $(".class6 :first-child")
    .fadeOut(2000)
    .next("img")
    .fadeIn(2000)
    .end()
    .appendTo(".class6");
    setTimeout(foo6, 4000);
  })();
});

$(function fn7() {
  $(".class7 img:gt(0)").hide();
  (function foo7() {
    $(".class7 :first-child")
    .fadeOut(2750)
    .next("img")
    .fadeIn(2750)
    .end()
    .appendTo(".class7");
    setTimeout(foo7, 5500);
  })();
});
.class1,
.class2,
.class3,
.class4,
.class5,
.class6,
.class7{
  display: block;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding:2px;
  float: left;
}

.imageClass {
  display: none;
  position: relative;
  animation: animateright 1s;
}

@keyframes animateright {
  from {
    right: -300px;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="class1" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

<div class="class2" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

<div class="class3" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

<div class="class4" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

<div class="class5" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>
<div class="class6" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>
<div class="class7" id="cust">
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
  <img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>

相关问题
最新问题