如何创建图像幻灯片与jquery,但与背景图像属性

How to create image slideshow with jquery but with background-image property?

本文关键字:图像 jquery 背景 属性 何创建 幻灯片 创建      更新时间:2023-09-26

我有这个HTML:

<div id="content_home_preview">
</div>

和这个CSS:

#content_home_preview{
float: left;
margin: 0;
padding: 0;
width: 940px;
height: 469px;
background-image: url("../Images/image1.png");
repeat: no-repeat;
}

如何创建幻灯片效果与下一个图像,如image2, image3等…

我尝试过jquery循环,但它的形式是这样的:

<div id="content_home_preview">
    <div class="image1"></div>
    <div class="image2"></div>
</div>

,但我只需要脚本反复更改背景图像属性与褪色效果…

谢谢

这似乎很有效。http://www.ovalpixels.com/blog/2009/02/21/making-fancy-websites-without-flash-animating-background-image/

请参阅此说明。这里使用的是Pure JS,您可以使用jquery使用相同的技术。

参考链接- https://www.w3schools.com/howto/howto_js_slideshow.asp