完整代码

Question

我使用fadeIn和fadeOut在20秒后旋转了背景图像。图像左上角有徽标，右上角有人图像，现在问题是图像应该用fadeIn和fadeOut旋转但是左上角的徽标不应该有fadeIn和fadeOut的效果（不应该有效果）改变）。

所以我的问题是如何淡化一个背景图像的一部分而其他部分不应该褪色（或不看）

我当前正在使用的jquery代码

    $("DIV#background IMG").eq(0).fadeIn(1000, function(){
        setTimeout("changeBackground(0)",20000);
    });

    changeBackground = function (i){
        curr_index = i;
        //alert(curr_index);
        nex_index = ((i + 1) > 3 ) ? 0 : i + 1;
        //alert(nex_index); 
        $("DIV#background IMG").fadeOut(1000)
        $("DIV#background IMG").eq(nex_index).fadeIn(1000, function(){
            setTimeout("changeBackground(nex_index)",20000);
        });
    }

注意：以上代码正确并且运作正常

感谢。

Answer 1

添加jQuery插件jquery-rotate。然后你可以使用：

.rotate(angle,[whence=relative])
.rotateLeft([angle=90])
.rotateRight([angle=90])

在您的代码中：

$("DIV#background IMG").fadeOut(1000).rotateRight([angle=360])

此外，您的代码在第二行末尾缺少;。

如果您的rotate概念与横幅广告相同，那么这就是代码。

$("DIV#background IMG").fadeOut(1000).attr('src', 'newimage.png').fadeIn(1000);

或者更好地将时间作为变量，以便您可以随时更改幻灯片：

var time = 500; // Keeping it 500 because of 500 (fadeIn) + 500 (fadeOut) = 1000!
$("DIV#background IMG").fadeOut(time).attr('src', 'newimage.png').fadeIn(time);

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Banner Rotate</title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <script type="text/javascript">
            function changeBG()
            {
                var d = new Date();
                $(".background img").fadeOut(500).attr('src', 'http://lorempixel.com/100/100/?' + d.getMilliseconds()).fadeIn(500);
            }
            $(document).ready(function(){
                setInterval('changeBG()', 1500);
            });
        </script>
    </head>
    <body>
        <div class="background">
            <img src="http://lorempixel.com/100/100/" alt="" />
        </div>
        <a href="#" onclick="changeBG(); return false;">Change</a>
    </body>
</html>

希望它有所帮助！：）

Answer 2

有一个用于循环图像的jquery插件。 jQuery Cycle。将所有图像放在同一容器元素中，并在其上调用cycle()。

该插件直接将一张图像淡化到另一张图像上，因此如果图像的徽标部分始终位于同一位置，您将不会注意到它的褪色。

另一个想法是将您的徽标放在单独的（透明的.png）图像中，并使用position:absolute将其设置为旋转图像顶部的正确位置。

20秒后用图像横幅淡化图像的一部分

我当前正在使用的jquery代码

2 个答案:

完整代码