Question

您好我发现此代码每隔几秒就会更换一次包含链接的图片，但问题是我不知道如何为此代码添加淡入淡出效果，因为我不是程序员，如果有人可以帮助我，我会非常感激，thx

   <script>
    var links = ["http://www.abc.com","http://www.def.com","http://www.ghi.com"];
    var images = ["http://www.abc.com/1.gif","http://www.def.com/2.gif","http://www.ghi.com/3gif"];
    var i = 0;
    var renew = setInterval(function(){
        if(links.length == i){
            i = 0;
        }
        else {
        document.getElementById("bannerImage").src = images[i]; 
        document.getElementById("bannerLink").href = links[i]; 
        i++;

    }
    },10000);
    </script>



<a id="bannerLink" href="http://www.abc.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.abc.com/1.gif" width="694" height="83" alt="some text">
</a>

对不起我的英文

Answer 1

如果您的页面中已经有jQuery

jQuery(function () {
    var links = ["http://www.abc.com", "http://www.def.com", "http://www.ghi.com"];
    var images = ["http://placehold.it/32/ff0000", "http://placehold.it/32/00ff00", "http://placehold.it/32/0000ff"];
    var i = 0, $link = $('#bannerLink'), $img = $('#bannerImage');
    setInterval(function () {
        i++;
        if (i >= links.length) {
            i = 0;
        }
        $link.fadeOut(function () {
            $img.attr('src', images[i]);
            $link.attr('href', links[i]).fadeIn();
        })
    }, 2000)
})

演示：Fiddle

每隔几秒就用一个链接淡化效果改变图像

1 个答案: