Question

我开发了一个简单的javascript动画，在轮播上交换动画并将它们淡入/淡出。我想匿名使用这些功能，因为我想将某些相同的功能用于不同的目的。

我一切正常，除了应该将第一张图像交换为nextItem()中的第二张图像之外，第一张图像再次加载。当我检查控制台时，即使indexOf（在这种情况下为items[0]）中的文本与images[0]相匹配，我插入的page-img检查也会显示-1。 div的src属性

function fadeIn(elem, dly) {
    elem.fadeIn(dly);
}

function fadeOut(elem, dly) {
    elem.fadeOut(dly);
}

function swapImg(elem, images) {
    timer = setInterval(function() {
            fadeOut(elem, 300);
            setTimeout(function() {
                nextItem.call(this, elem, images);
                fadeIn(elem, 100);
            }, 400);
    }, 5000);
}

function nextItem(elem, items) {    
    let itemSrc = elem.attr("src");
    let i = items.indexOf(itemSrc); //-1??
    if (i + 1 < items.length) {
        elem.attr("src", items[i+1]);     
    } else {
        elem.attr("src", items[0]);
    }    
}

  const images=["http://placehold.it/350?text=img1",
                             "http://placehold.it/350?text=img2",
                             "http://placehold.it/350?text=img3"];

document.body.addEventListener("load", swapImg($('#page-img'), images));

.zoom {
  height: 350px;
  width: 350px;
}

.zoom.visible > img {
    overflow: hidden;
    animation-delay: .1s;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: move;
    animation-name: move;
    animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    -o-animation-direction: alternate;
    -ms-transform-origin: middle center;
    transform-origin: middle center;
    -webkit-transform-origin: middle center;
    -o-transform-origin: middle center;
    -moz-transform-origin: middle center;
}

.zoom > img {
    height: auto!important;
    width: 100%!important;
}

@-webkit-keyframes move {
    from {
        transform: scale(1);
        text-indent: -9999px;
        ms-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -moz-transform: scale(1);
    }
    to {
        transform: scale(1.15);
        -ms-transform: scale(1.15);
        -webkit-transform: scale(1.15);
        -o-transform: scale(1.15);
        -moz-transform: scale(1.15);
    }
}
@keyframes move {
    from {
        transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -moz-transform: scale(1);
    }
    to {
        transform: scale(1.15);
        -ms-transform: scale(1.15);
        -webkit-transform: scale(1.15);
        -o-transform: scale(1.15);
        -moz-transform: scale(1.15);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zoom visible imagen1" id="zoom-div">            
    <img src="http://placehold.it/350?text=img1" alt="" id="page-img">
</div>

我看到它在这里很好用。但是，在我的实时服务器上，我要在包含此代码的脚本加载后在html中添加侦听器，因为我希望此文件可重用，而不是为每个页面加载相同的侦听器（某些页面将交换文本以用于例如，并且不会淡入/淡出）

Answer 1

这是因为您的第一个图片网址不在数组中。 http://placehold.it/350?text=img1应该是http://placeholder.com/350?text=img1，然后第一个indexOf等于0而不是-1

匿名化函数后indexOf检查失败

1 个答案: