Question

我有一堆像这样的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-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上，通过框开始循环。在mouseleave上，结束循环并重新启动 https://jsfiddle.net/sy5br7d0/

Answer 1

如果你想循环遍历所有div，那么你应该使用 timer = window.setInterval 而不是使用 window.setTimeout 。

moidified script：

<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>

Answer 2

用户setInterval()代替setTimeout()

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

Jquery超时更改div

2 个答案: