H5创建一个简单的自动幻灯片

这是国外的网友做的h5自动幻灯片

原文链接
http://www.htmlgoodies.com/beyond/javascript/stips/create-a-simple-automated-slideshow.html
我想展示一个简单的循环幻灯片在我的网站上有一天,它似乎所有的插件我遇到过于笨重的琐碎的目的,所以我将我的注意力转向独立的解决方案。 最后,我发现jQuery是所有我需要完成我想。 在今天的文章中,我将向您展示我是如何做到的。

定义图像

一些人包括JavaScript源图像列表,但我宁愿把它们在HTML领域,因为它们是页面内容的一部分。 我都懒得算出所有图像的维度,这就是在JS完成的。 我原来的列表包含大量的t恤与religion-themed图形和文本。 类似“崇拜我或我将永远折磨你! 有美好的一天。 BFF——神”。 你可能不认为这是一个特别有趣的话题,但在右边轻松的心态,宗教可以搞笑素材。
问问Monty Python。 尽管如此,今天的演示幻灯片是一个更少的煽动性的主题,即cars.A

<div id="slideshow">
<div>
<img src="http://www.htmlgoodies.com/imagesvr_ce/3435/mustang.jpg" alt="mustang.jpg"><br>
A newer Mustang.
</div>
<div>
<img src="http://www.htmlgoodies.com/imagesvr_ce/3798/camaro.jpg" alt="camaro.jpg"><br>
A modern Camaro.
</div>
<div>
<img src="http://www.htmlgoodies.com/imagesvr_ce/6859/classic.jpg" alt="classic.jpg"><br>
An oldie but a goodie!
</div>
<div>
<img src="http://www.htmlgoodies.com/imagesvr_ce/1767/classic2.jpg" alt="classic2.jpg"><br>
More old cars.
</div>
<div>
<img src="http://www.htmlgoodies.com/imagesvr_ce/5199/video_game_car.jpg" alt="video_game_car.jpg"><br>
A good rendering of a classic race car.
</div>
</div>

CSS是非常最小集容器DIV维度,增加填充物之间的顶部和左页边距和图像,和围绕着图像边框和阴影。
body {
background-color: gray;
}

#slideshow {
position: relative;
width: 300px;
height: 510px;
padding: 10px;
}

#slideshow > div {
position: absolute;
text-align: center;
overflow: visible;
display: none;
}
#slideshow > div > img {
border: 2px solid white;
box-shadow: 0 0 20px white;
}
S后才开始我们所有的图片已经定义。 第一行隐藏所有div的图片,这样我们可以给他们一个幻灯片中的一次。 然后,setInterval()用来遍历图像速度每5秒。 它调用匿名函数褪色当前图像,继续下一个兄弟姐妹,褪色,并将其添加到幻灯片容器元素。 注意使用结束()函数,它返回这个指针的状态。 没有它,下一次调用渐隐()并不像预期的那样工作,导致图像被堆积在彼此之上。
$("#slideshow > div").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);

定心图片

定心不同大小图像动态没有在公园里散步,主要是因为这取决于大小的图像,这是在加载之前不知道。 这个问题的解决方案是创建一个新的图像对象和分配其src的形象元素。 导致浏览器下载图片,从而分配它的维度:

jQuery.fn.setDivSize = function(extraHeight, extraWidth) {
var img = new Image();
img.src = this.children('img').attr('src');
//the extra height and width are to accommodate
//the text below the images.
this.height(img.height + extraHeight)
.width (img.width  + extraHeight);
return this;
}

定心功能

这是中心的功能图像相对于其父母或包含基于一个布尔参数窗口(真的是父母):

jQuery.fn.center = function( parent ) {
parent = $( parent ? this.parent() : window );

this.css({
"position": "absolute",
"top": (((parent.height() - this.outerHeight()) / 2) + parent.scrollTop() + "px"),
"left": (((parent.width() - this.outerWidth()) / 2) + parent.scrollLeft() + "px")
});
return this;
}

把它放在一起

这一次,我包括一些settimeout给元素一个机会完全呈现。 否则,我注意到在图像边缘不一致。

$(function() {
setTimeout(function(){
//display the first image
$('#slideshow > div:first')
.setDivSize(30, 40)
.center(false)
.fadeIn(1000);

//loop through the remaining images
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.setDivSize(30,40)
.center(false)
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  5000);
}, 500 );
});