0

我在 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);
        });
    }

注意：上面的代码是正确的并且工作成功

谢谢。

4

2 回答 2

0

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

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

在您的代码中：

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

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

如果您的概念与rotateBanner Rotater中的一样，那么这就是代码。

$("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>

希望能帮助到你！:)

于 2012-06-08T06:11:51.657 回答
0

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

该插件将一个图像直接淡化到另一个图像之上，因此如果图像的徽标部分始终保持在同一位置，您将不会注意到它正在淡化。

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

于 2012-06-08T07:56:24.767 回答