我正在尝试使用HTML,CSS,JavaScript和JQuery为我的网站构建一个简单的网页。我想要的是在页面顶部显示我的一些图像的幻灯片。我只是想让图片逐渐淡出并永远淡入,直到用户关闭浏览器。我想让每张照片都显示一段时间,之后它会淡出,另一张照片会淡入。
我在SO上提到this以及this帖子但是找不到解决方案。我从this页面得到了一些想法并试图开发一些代码。
网站的整体布局如下:
为此,我的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);
}
现在,我的问题描述如下:
前几秒,顶部是空白的。即使我正在开发并在本地计算机上拥有所有文件,图像也不会显示。
第一张图片直接弹出屏幕,而不是淡入。
此图像淡出后,图像块消失,就好像它被设置为display: none;
一秒钟。图像后面的整个页面都会向上移动。然后,下一个图像淡入,等等一切正常。
因此,简而言之,我在开始播放幻灯片时遇到了问题。有人可以帮忙吗?
另外请告诉我在哪里可以放置我的代码,这样每个人都可以访问并查看它是如何运行的?
答案 0 :(得分: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();
});
答案 1 :(得分:1)
试试这个:http://jsfiddle.net/3XV5M/
您的问题是第一次运行计时器功能时它不会立即运行。它将在8000ms后运行。这个小提琴的工作方式是它会立即执行该功能,并在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;
}
希望有所帮助。
答案 2 :(得分:1)
<img id="headerlogo" />
不要这样做(没有src
属性的图片标记)
放一个可以容纳空格的div(在{css中设置position:relative
宽度和高度)
然后问题是您在时间循环中更改了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);
(如果你想在加载过程中显示图像,一些简单的更改应该做;如果第一个间隔立即开始,你显然不需要淡化“手动”第一个图像)