Javascript 一页异步owl转盘

我的页面上有3个相同类名的旋转木马

 <div>
   <div class="owl-carousel owl-theme">
     <div class="item"><img src="assets/fullimage1.jpg"></div>
     <div class="item"><img src="assets/fullimage2.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme">
     <div class="item"><img src="assets/fullimage3.jpg"></div>
    <div class="item"><img src="assets/fullimage4.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme">
     <div class="item"><img src="assets/fullimage5.jpg"></div>
    <div class="item"><img src="assets/fullimage6.jpg"></div> 
   </div>
 </div>

这很好，但是所有的旋转木马几乎同时启动。有没有办法在传送带之间增加延迟？所以首先开始第一个，然后当第一个完成后，第二个开始，等等。。。

---

提前谢谢。

您可以使用如下超时：

$(".owl-carousel ").each(function(i,elm){
  var delay = i*1000; // generate the delay somehow as you need
  setTimeout((function(){
    var $elm = $(elm);
    return function(){
       $elm.owlCarousel({  
           navigation : false, 
           singleItem : true,
           autoPlay: true,
           pagination: false,
           transitionStyle: "fade"
       });
    }
  })(),delay);
});

---

您可以使用这样的超时：

$(".owl-carousel ").each(function(i,elm){
  var delay = i*1000; // generate the delay somehow as you need
  setTimeout((function(){
    var $elm = $(elm);
    return function(){
       $elm.owlCarousel({  
           navigation : false, 
           singleItem : true,
           autoPlay: true,
           pagination: false,
           transitionStyle: "fade"
       });
    }
  })(),delay);
});

---

我建议您为每个转盘添加一个ID，并为每个转盘分别赋予一个

autoPlay

属性。这样，它们将在不同的时间重新开始，当您单击一个转盘时，它不会移动其他转盘。 单击一次，您的将勾选每个旋转木马

 <div>
   <div class="owl-carousel owl-theme" id="owl1">
     <div class="item"><img src="assets/fullimage1.jpg"></div>
     <div class="item"><img src="assets/fullimage2.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme" id="owl2">
     <div class="item"><img src="assets/fullimage3.jpg"></div>
    <div class="item"><img src="assets/fullimage4.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme" id="owl3">
     <div class="item"><img src="assets/fullimage5.jpg"></div>
    <div class="item"><img src="assets/fullimage6.jpg"></div> 
   </div>
 </div>

$("#owl1").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 10000;
});

$("#owl2").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 7000;
});

$("#owl3").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 5000;
});

$（“#owl1”）.owlCarousel（{
导航：错误，
单项：对，
自动播放：对，
分页：false，
过渡风格：“褪色”，
自动播放：10000；
});
$（“#owl2”）.owlCarousel（{
导航：错误，
单项：对，
自动播放：对，
分页：false，
过渡风格：“褪色”，
自动播放：7000；
});
$（“#owl3”）.owlCarousel（{
导航：错误，
单项：对，
自动播放：对，
分页：false，
过渡风格：“褪色”，
自动播放：5000；
});

我建议您为每个转盘添加一个ID，并为每个转盘分别赋予一个

自动播放

属性。这样，它们将在不同的时间重新开始，当您单击一个转盘时，它不会移动其他转盘。 单击一次，您的将勾选每个旋转木马

 <div>
   <div class="owl-carousel owl-theme" id="owl1">
     <div class="item"><img src="assets/fullimage1.jpg"></div>
     <div class="item"><img src="assets/fullimage2.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme" id="owl2">
     <div class="item"><img src="assets/fullimage3.jpg"></div>
    <div class="item"><img src="assets/fullimage4.jpg"></div> 
   </div>

   <div class="owl-carousel owl-theme" id="owl3">
     <div class="item"><img src="assets/fullimage5.jpg"></div>
    <div class="item"><img src="assets/fullimage6.jpg"></div> 
   </div>
 </div>

$("#owl1").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 10000;
});

$("#owl2").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 7000;
});

$("#owl3").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: 5000;
});

$（“#owl1”）.owlCarousel（{
导航：错误，
单项：对，
自动播放：对，
分页：false，
过渡风格：“褪色”，
自动播放：10000；
});
$（“#owl2”）.owlCarousel（{
导航：错误，
单项：对，
自动播放：对，
分页：false，
过渡风格：“褪色”，
自动播放：7000；
});
$（“#owl3”）.owlCarousel（{
导航：错误，
单项：对，
自动播放：对，
分页：false，
过渡风格：“褪色”，
自动播放：5000；
});

结合Phil和TJ的答案：

$(".owl-carousel ").each(function(i,v){
var delay = i*10000;
$(v).owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: delay
});
});

---

结合Phil和TJ的回答：

$(".owl-carousel ").each(function(i,v){
var delay = i*10000;
$(v).owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade",
    autoPlay: delay
});
});

---

---

不同的类如何？slideSpeedproperty如何？我想把它保留在一个类中，这就是为什么我想看看是否可以延迟。slideSpeed的文档没有指出任何属性可以实现您想要的，我也尝试了slideSpeed，但没有任何区别。有一个延迟，但非常小，几乎看不见。不同的类如何？slideSpeedproperty如何？我想把它保留在一个类中，这就是为什么我想看看是否有可能延迟。slideSpeed的文档没有指出任何属性可以实现您想要的效果我也尝试过slideSpeed，但没有任何区别。有一个延迟，但非常小，几乎不可见。这不是延迟滑块的加载而不是滑动速度吗？@madalinivascu“转盘几乎同时启动。有没有办法在转盘之间添加延迟？”-我想OP希望在转盘之间延迟，不是幻灯片她希望在幻灯片之间有一个延迟3秒后没有一个滑块加载，在这3秒钟内滑块的内容会是什么样子？实际上这对我想要的很好。它增加了传送带之间的延迟。谢谢，这不是延迟滑块的加载而不是滑动速度吗？@madalinivascu“旋转木马几乎同时启动。有没有办法在旋转木马之间增加延迟？”-我想OP希望在旋转木马之间延迟，而不是幻灯片。她希望在滑台之间延迟，而不是在3秒后加载一个滑块，在这3秒钟内，滑块的内容会是什么样子？实际上，这对于我想要的东西来说非常好。它增加了传送带之间的延迟。谢谢这其实是我想避免的。不过谢谢你，好的。抱歉：（事实上这是我想避免的。不过无论如何谢谢你哦，好吧。抱歉：(