用于逐个淡入淡出图片的html代码
用于逐个淡入淡出图片的html代码
提问于 2011-08-07 06:48:02
我是一个新手网站建设者。我有照片，我想把它们放在我的网站上，我想让它们一个接一个地持续过渡。谁能为我提供一个HTML代码，其中所有我必须做的包括我已经在文件中的图片的名称。他们是不同的大小，但当他们过渡的时候，我希望他们也有相同的大小。它们是jpg格式的。
感谢能帮上忙的人吗？
回答 2
Stack Overflow用户
发布于 2011-08-07 07:05:09
你想使用jQuery来做这件事，这样会容易得多……我假设你的HTML看起来像这样(简化的)：
<div class="images">
<img src="..." />
<img src="..." />
<img src="..." />
...
</div>有许多具有各种功能的图像滑块，但如果淡入淡出是您需要的全部，那么编写几行代码可能会更容易。
执行以下操作(使用jQuery)：
$(function() {
var images = $(".images img").hide();
var current = 0;
setInterval(function() {
var next = ((current + 1) % images.length);
images.eq(current).fadeOut();
images.eq(next).fadeIn();
current = next;
});
});不要忘记将CSS样式设置为：
.images
{
position: relative;
}
.images img
{
display: none;
position: absolute;
}这是一个每5秒旋转一次图像的working example。
Stack Overflow用户
发布于 2011-08-07 07:08:33
你要找的不是HTML代码，而是Javascript (或CSS)代码。我建议你查阅有关图像滑块和图库的工作原理和结构的教程。使用jQuery Javascript库尤其简单。
我已经查找了几个简单的滑块和图库的链接，你可以试着理解和实现：
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
http://www.tripwiremagazine.com/2010/10/20-stunning-jquery-image-sliders-and-tutorials-for-creating-your-own.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6969487
复制相关文章
相似问题
腾讯云开发者
