jQuery的超時變化DIV

我有一堆的div像這樣jQuery的超時變化DIV

<div class="listingImage"> 
    <div style="background-image:url('listings/listing1/1/image8Main.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image2.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image3.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image4.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image5.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image6.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image7.jpeg')"></div> 
    <div style="background-image:url('listings/listing1/1/image9.jpeg')"></div> 
</div>

用CSS：

.listingImage>div: { 
    position:absolute; 
    z-index:98; 
    bottom:0; 
    right:0; 
    left:0; 
    top:0; 
    background:50% 50%/cover; 
} 
.listingImage>div.active { 
    z-index:99; 
}

我要通過這些div jQuery的腳本來循環並改變z-index的放其餘的都是其中之一。

<script> 
    var timer 
    $(".listingImage").on("mouseenter", function() { 
     var element = $(this) 
     timer = window.setTimeout(function() { 
      if (element.children(".active").length) { 
       element.children(".active").removeClass("active").next().addClass("active") 
      } else { 
       element.children().first().addClass("active") 
      } 
     }, 500) 
    }) 
    $(".listingImage").on("mouseleave", function() { 
     $(".active", this).removeClass("active") 
     clearTimeout(timer) 
    }) 
</script>

此腳本將轉到下一個div並停止工作。我相信我有兩個問題。這可能與var element=$(this)有關。另外，我的mouseleave正在被z-index中的變化觸發。我如何通過div實現騎車，然後返回正常onmouseleave？任何幫助表示讚賞，謝謝。

在mouseenter上的任務通過框循環開始。在鼠標離開，結束週期和重啓 https://jsfiddle.net/sy5br7d0/

來源

2015-11-17 Maciek Semik

一個的jsfiddle或相當於將是有益的 – sjm

你的問題是模糊的。如果你想讓它自動循環，你爲什麼要把定時器綁定到「mouseenter」？請澄清，並正確縮進和隔開您的代碼。 – apscience

@sjm我加了jsfiddle。所以它轉到box1，但不會繼續到下一個框。第二個問題：因爲當你輸入框時，你在圖像中循環。當你離開盒子時，定時器被清除並且循環停止並重置爲原始盒子。 –

如果你通過所有的div的要循環然後ü應該使用定時器= window.setInterval，而不是使用window.setTimeout。

moidified腳本：

<script> 
var timer 
    $(".listingImage").on("mouseenter", function() { 
     var element = $(this) 
     timer = window.setInterval(function() { 
      if (element.children(".active").length) { 
       element.children(".active").removeClass("active").next().addClass("active") 
      } else { 
       element.children().first().addClass("active") 
      } 
     }, 500) 
    }) 
    $(".listingImage").on("mouseleave", function() { 
     $(".active", this).removeClass("active") 
     clearTimeout(timer) 
    }) 
</script>

來源

2015-11-17 06:48:08

這是完美的。 –

用戶的setTimeout()setInterval()代替

var timer 
$(".listingImage").on("mouseenter", function() { 
    var element = $(this) 
    timer = window.setInterval(function() { 
     if (element.children(".active").length>0) { 
     element.children(".active").removeClass("active").next().addClass("active") 
     } else { 
      element.children().first().addClass("active") 
     } 
    }, 500) 
}) 
$(".listingImage").on("mouseleave", function() { 
    $(".active", this).removeClass("active") 
    clearInterval(timer) 
})

Fiddle

來源

2015-11-17 07:00:52

jQuery的超時變化DIV

回答

相關問題