javascript jQuery timeout change div

wj8zmpe1 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(100)

我有一堆这样的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/

JavaScript

来源：https://stackoverflow.com/questions/33750033/jquery-timeout-change-div

2条答案

按热度按时间

nwnhqdif1#

如果你想循环所有的div，那么你应该使用timer = window.setInterval而不是使用window.setTimeout。
修饰的脚本：

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

赞(0）回复(0）举报 2023-04-10

kadbb4592#

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

赞(0）回复(0）举报 2023-04-10

我来回答

javascript jQuery timeout change div

2条答案

相关问题

热门标签

最新问答