Question

我的一位客户希望他的标志在现场的头部与另一个标志相左。

例如:

<img src="images/logo-1.png" style="display:block;" />

用<条码>logo-2.png来替代这一条的最简单方式是什么。

我们不需要一幅巨大的文字,只是一个简单的文字,每10秒钟就有一个标识和一个标识,并在<代码>logo-1.png<>和logo-2.png之间轮换。

加入set Interval和fadeIn fadeOut ? 我不敢肯定

谢谢。

Answer 1

I m sure this could be simpler, but here s something that you could use as a starting point, if none of the many plugins suit your needs:

var img0 = "http://dummyimage.com/100x100/000/fff",
    img1 = "http://dummyimage.com/100x100/000/ff0000",
    current = false;
function switchImg() {
    $("#img").fadeOut(function() {
        $(this).attr("src", (current) ? img0 : img1).fadeIn();
        current = !current;
    });
}
setInterval(switchImg, 10000);

Here s a working example.

Answer 2

你们可以把图像放在彼此之间,而只是 f弃这些图像,并与其z子相 play:

    function switchLogo() {
    var activeImg = $( #logo .active ),
        nextImg = $( #logo :not(.active) );
    activeImg.fadeOut(500, function() {
        nextImg.addClass( active );
        activeImg.removeClass( active ).css({
            opacity: 1,
            display:  block 
        });
    });
}
setInterval(switchLogo, 10000);

By positioning them on top of each other and modifying the z-index you get a smoother transition.
Here s a live demo :

http://jsfiddle.net/gion_13/gFHMJ/

Answer 3

Maybe something like this: http://jsfiddle.net/WHnLs/

Answer 4

Check out Jquery Cycle

http://jsfiddle.net/gion_13/gFHMJ/

友情链接