Question

我的页面上有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>

然后在我的js上

 $(".owl-carousel ").owlCarousel({  
    navigation : false, 
    singleItem : true,
    autoPlay: true,
    pagination: false,
    transitionStyle: "fade"
});

这很好用，但所有的旋转木马几乎都在同一时间开始。有没有办法在旋转木马之间添加延迟？所以首先开始第一个，然后当第一个完成时，第二个开始等... 提前谢谢。

Answer 1

结合Phil＆amp; 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
});
});

Answer 2

你可以使用这样的超时：

CREATE INDEX ON :office(rc)
CREATE INDEX ON :Person(numDoc)
USING PERIODIC COMMIT 500 LOAD CSV FROM 
"file:///path/to/file" AS csvLine
MATCH (x:office{ rc:"345421"})
MERGE (n:Person { numDoc: toint(csvLine[1]) })
CREATE (n) -[:Afil]-> (x)

Answer 3

我建议您为每个轮播添加一个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;
});

异步猫头鹰旋转木马在一个页面

3 个答案: