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

H5创建⼀个简单的⾃动幻灯⽚ 这是国外的⽹友做的h5 ⾃动幻灯⽚ 原⽂链接 我想展⽰⼀个简单的循环幻灯⽚ 我的⽹站上有⼀天,它似乎所有的插件我遇到过于笨重的琐碎的⽬的,所以我将我的注意⼒转向独⽴的解决 ⽅案。 最后,我发现j Query是所有我需要完成我想。 今天的⽂章中,我将向您展⽰我是如何做到的。 定义图像 ⼀些⼈包括JavaScript源图像列表,但我宁愿把它们 HTML领域,因为它们是页⾯内容的⼀部分。 我都懒得算出所有图像的维度,这就是 JS完成的。 我原来的列表包含⼤量的t恤与religion-themed图形和⽂本。 类似 “崇拜我或我将永远折磨你! 有美好的⼀天。 BFF—— 神”。 你可能不认为这是⼀个特别有趣的话题,但 右边轻松的⼼态,宗教可以搞笑素材。 问问Monty Python。 尽管如此,今天的演⽰幻灯 ⽚是⼀个更少的煽动性的主题,即cars.A div id=slideshow div img src=/imagesvr_ce/3435/mustang. pg alt=mustang. pgbr A newer Mustang. /div div img src=/imagesvr_ce/3798/camaro. pg alt=camaro. pgbr A modern Camaro. /div div img src=/imagesvr_ce/6859/classic. pg alt=classic. pgbr An oldie but a goodie ! /div div img src=/imagesvr_ce/ 1767/classic2. pg alt=classic2. pgbr More old cars. /div div img src=/imagesvr_ce/5199/video_game_car. pg alt=video_game_car. pgbr 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() ; set Interval(function() {