我有一堆这样的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;
}
我有一个jQuery脚本来循环遍历这些div,并更改z索引以将一个放在所有其他div的顶部。
<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)
有关。此外,我的鼠标离开是由z索引的变化触发的。我如何才能实现循环通过div,然后返回到正常的鼠标离开?
任务,在鼠标进入时,开始循环通过框。在鼠标离开时,结束循环并重新启动。https://jsfiddle.net/sy5br7d0/
2条答案
按热度按时间nwnhqdif1#
如果你想循环所有的div,那么你应该使用timer = window.setInterval而不是使用window.setTimeout。
修饰的脚本:
kadbb4592#
用户
setInterval()
而不是setTimeout()
Fiddle