3

我正在尝试使用 HTML、CSS、JavaScript 和 JQuery 为我的网站构建一个简单的网页。我想要的是在页面顶部显示我的一些图像的幻灯片。我只想让图片永远淡出并淡入，直到用户关闭浏览器。我希望每张图片都显示一段时间，之后它会淡出，另一张图片会淡入。

我在 SO 上提到了这个以及这篇文章，但找不到解决方案。我从这个页面得到了一些想法，并尝试开发一些代码。

网站整体布局如下：

这就是我想要的，我得到了，我只想在这里为照片制作动画

为此，我的index.html页面如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="css/style.css" />
    <script language="javascript" src="js/jquery-1.10.2.min.js"></script>
    <script language="javascript" src="js/common.js"></script>
    <script language="javascript" src="js/banner_rotator.js"></script>
</head>
<body onload="loadBody();">
<div id="wrapper">
    <img id="headerlogo" />
<div id="nav">
<a href="javascript: void(0);">Home</a>
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Weddings</a>
<a href="javascript: void(0);">Portraiture</a>
<a href="javascript: void(0);">Landscapes</a>
<a href="javascript: void(0);">Products</a>
<a href="javascript: void(0);">Miscellaneous</a>
<a href="javascript: void(0);">Services</a>
<a href="javascript: void(0);">Contact</a>
</div>
    <div id="container">
        <div id="content">
<!-- Main content starts here -->
<p>
Welcome to the world of The Siblings' photography.
</p>
imgpos = <span id="imgposspan"></span>
<!-- Main content ends here -->
        </div>
    </div>
</div>
</body>
</html>

CSS是这样的：

body {
    background-color: transparent; color: #d0d0d0;
    font: normal normal 11px verdana; margin: 0 auto;
}
#wrapper {
    background-color: transparent; width: 960px; margin: 0 auto;
}
#headerlogo {
    border-radius: 0px 0px 5px 5px; display: block;
    width: 960px; height: 350px;
    background-color: #d0d0d0;
}
#container {
    width: 100%; margin-top: -35px;
}
#nav {
    background-color: transparent;
    color: #888888; border-radius: 5px; padding: 10px;
    width: 100%; position: relative; top: -40px;
}
#nav>a {
    border-radius: 5px; display: inline-block; padding: 5px 19px;
    font-weight: bold; border: 1px solid transparent;
    color: #888888; background: none none transparent no-repeat;
}
#nav>a:link {
    text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:visited {
    text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:hover{
    text-decoration: none; border-color: #ffa500; background-image: url("/img/1x30_ffa500.gif");
    background-repeat: repeat-x; box-shadow: 0px 0px 5px #ffd700;
}
#nav>a:active {
    text-decoration: underline; border-color: transparent;
    background-image: none;
}

#content {
    background-color: #f0f0f0; color: #202020;
    padding: 5px; border-radius: 5px;
}

common.js文件是这样的：

$(document).ready(function (){
    var images = new Array();
    images[0] = new Image();
    images[0].src = "img/coverpics/sea_link.jpg";
    images[1] = new Image();
    images[1].src = "img/coverpics/marine_drive.jpg";
    images[2] = new Image();
    images[2].src = "img/coverpics/backbay.jpg"
    banner_rotator("headerlogo", images, 0);
});

而且，banner_rotator.js文件是这样的：

function banner_rotator(imgid, imgarray, imgpos) {
    setInterval(function() {
        if (imgpos >= imgarray.length || imgpos == undefined)
            imgpos = 0;
        $("#"+imgid).attr({ "src" : imgarray[imgpos].src });
        $("#"+imgid).fadeIn(1000, "linear");
        $("#"+imgid).delay(6500);
        $("#"+imgid).fadeOut(500);
        // $("#imgposspan").html(imgpos);
        imgpos++;
    }, 8000);
}

现在，我的问题描述如下：

  1. 在最初的几秒钟内，顶部是空白的。即使我正在开发并在我的本地计算机上拥有所有文件，图像也不会显示。

  2. 这第一张图像直接在屏幕上弹出，而不是淡入。

  3. 在这个图像淡出之后，图像块消失了，就好像它被设置display: none;了一秒钟一样。跟随图像的整个页面向上移动。然后，下一个图像淡入等等一切运行正常。

因此，简而言之，我在开始这个幻灯片时遇到了问题。有人可以帮忙吗？

另外请告诉我我可以把我的代码放在哪里，这样这里的每个人都可以访问并亲自查看它是如何运行的？

JSFIDDLE

4

3 回答 3

1

问题是你在间隔结束时淡出。所以替换这个：

    $("#"+imgid).attr({ "src" : imgarray[imgpos].src });
    $("#"+imgid).fadeIn(1000, "linear");
    $("#"+imgid).delay(6500);
    $("#"+imgid).fadeOut(500);

有了这个：

    $("#"+imgid).fadeOut(500)
    $("#"+imgid).queue(function(){
    $("#"+imgid).attr({ "src" : imgarray[imgpos].src });
    $("#"+imgid).fadeIn(1000);
    $("#imgposspan").html(imgpos);
    imgpos++;
    $(this).dequeue();
    });

JSFIDDLE 演示

于 2013-11-10T11:52:57.910 回答
1

试试这个：http: //jsfiddle.net/3XV5M/

您的问题是第一次运行计时器功能时它不会立即运行。它将在 8000 毫秒后运行。这个小提琴的工作方式是它会立即执行函数并在 8 秒后再次运行。注意我使用的是 setTimeout 而不是 setInterval。

function banner_rotator(imgid, imgarray, imgpos) {
    if (imgpos >= imgarray.length || imgpos == undefined) imgpos = 0;

    $("#"+imgid).attr({ "src" : imgarray[imgpos].src })
                .fadeIn(1000, "linear")
                .delay(6500)
                .fadeOut(500);

    imgpos++;

    setTimeout(function() {banner_rotator(imgid, imgarray, imgpos) }, 8000);
}

另一个问题是您需要先隐藏图像，以便它们可以淡入。如果它们已经可见，它们将不会淡入。

#headerlogo {
    border-radius: 0px 0px 5px 5px;
    width: 960px; height: 350px;
    background-color: #d0d0d0;
    display: none; /* Add this */
}

然后为了防止当你淡出图像时其他元素跳起来，将图像元素包装在一个 div 中并设置它的高度。我使用了一个带有类横幅的 div 并添加了这种样式：

.banner {
    height: 350px;
}

希望有帮助。

于 2013-11-10T12:28:21.310 回答
1 
 <img id="headerlogo" />

不要那样做（没有src属性的图像标签）

放置一个可以容纳空间的 div（position:relative在 CSS 中设置宽度和高度）

那么问题是你src在你的时间循环中改变你的属性，这并不顺利

在您的 CSS 中，假设您将滑块包装器命名为 headerlogo_wrapper

 div.headerlogo_wrapper > img {position:absolute;display:none;left:0;top:0}

然后将图像附加到您创建的空间持有者（它们不会明显显示）

然后你淡入你的第一张图片然后你启动你的setInterval ：

//after having appended the images to the slider wrapper :

var $img = $("div.headerlogo_wrapper > img");
$img.eq(0).fadeIn(1000, "linear");
var ivisible = 0;


setInterval( function() {
$img.eq(ivisible).fadeOut(500);
++ivisible;
if (ivisible>$img.length-1) ivisible = 0;

$img.eq(ivisible).stop().fadeIn(1000, "linear");

}, 8000);

（如果您希望在加载期间显示图像，则应进行一些简单的更改；此外，如果第一个间隔立即开始，您显然不需要“手动”淡入第一张图像）

于 2013-11-10T13:56:26.713 回答