Question

我正在尝试创建与此页面上的云类似的幻灯片效果：http://www.poweredwebsite.com/index-v.php

使用javascript（JQuery），css或html。我目前的代码无效（我正在使用Chrome）

<html>
<head>
    <style type="text/css">
        .container {
            position: absolute;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }

        .images-container {
            position: absolute;
            padding: 0;
            margin: 0;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        function animate() {
            $(".scroll-image").animate({ "left": "+=500px" }, 3000, "linear",
                                   function () {
                                       $(this).css({ "left": "-=500px" });
                                       animate();
                                   });
        }

        animate();
    </script>
</head>
<body>
    <div class="container">
        <span class="images-container">
            <span class="scroll-image" style="left: -500px">
                <img src="http://www.startextures.com/starnetblog/wp-content/uploads/2011/01/starnetblog_seamless_hazard_danger_texture4.jpg" width="500px">
            </span>
            <span class="scroll-image" style="left: 0px">
                <img src="http://www.startextures.com/starnetblog/wp-content/uploads/2011/01/starnetblog_seamless_hazard_danger_texture4.jpg" width="500px">
            </span>
        </span>
    </div>
</body>
</html>

任何帮助？

Answer 1

尝试这样的事情：

<强>标记：

<div class="bg"></div>

<强> CSS

.bg {
    background: url(http://www.startextures.com/starnetblog/wp-content/uploads/2011/01/starnetblog_seamless_hazard_danger_texture4.jpg) center top;
    height: 700px;
}

<强>的jQuery ：

var bgPos = 0;
setInterval(function() {
    $(".bg").css("background-position", (bgPos-= 1) + "px");
}, 60);

它应如下所示：http://jsfiddle.net/2Fb3p/

使用setInterval时间以及移动它的像素数量，直到获得所需效果。

Answer 2

<强> HTML

<div class="container">
    <div class="images-container">
    </div>
</div>

<强> CSS

.container {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.images-container {
    position: absolute;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-image: url("http://www.startextures.com/starnetblog/wp-content/uploads/2011/01/starnetblog_seamless_hazard_danger_texture4.jpg");
    background-position: 0;
}

<强>的jQuery

function animate() {
    $(".images-container").animate({"background-position": "-=5"}, 200, "linear")
}

setInterval(animate, 200)

使用animate(...,...,linear)然后动画不跳

Html，Javascript或Css云滑动

2 个答案: