我正在尝试创建一个 jQuery 应用程序，以便在加载网页时显示一组图像的幻灯片。我尝试使用 jQuery 函数，如“slideDown()、Hide()、Show()、scrollTop()、scrollLeft()”。我无法延迟他们的显示。图像在瞬间滚动或滑动。因此我在下面发布我的代码。请帮我解决...
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript">
function Images() {
for (var i = 0; i < 1000; i++)
$("#div4").fadeOut(1000);
for (var i = 0; i < 1000; i++)
$("#div3").fadeIn(1000);
for (var i = 0; i < 1000; i++)
$("#div2").fadeOut(1000);
for (var i = 0; i < 1000; i++)
$("#div1").fadeIn(1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1" onclick="Images()" style="background-image: url('images/Chrysanthemum.jpg');
height: 500px; width: 500px">
<div id="div2" onclick="Images()" style="background-image: url('images/Lighthouse.jpg');
height: 500px; width: 500px">
<div id="div3" onclick="Images()" style="background-image: url('images/Desert.jpg');
height: 500px; width: 500px">
<div id="div4" onclick="Images()" style="background-image: url('images/Koala.jpg');
height: 500px; width: 500px">
</div>
</div>
</div>
</div>
</form>
</body>
最佳答案
您可以拥有一组 img标签 <div/>像这样:
<div id="container">
<img alt="test" class="slide" width="320" height="240" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/p480x480/1012341_10151567603438440_1504447620_n.jpg" />
<img alt="test" class="slide" width="320" height="240" src="http://heathermalyn.files.wordpress.com/2012/09/nature-beauty-art.jpg?w=644" />
<img alt="test" class="slide" width="320" height="240" src="http://nicefun.net/userpix10/11427_Beauty_Of_Nature_Around_Us_NiceFun_372_1.jpg" />
<img alt="test" class="slide" width="320" height="240" src="http://www.wunderground.com/data/wximagenew/t/twinietwo06/957.jpg" />
<img alt="test" class="slide" width="320" height="240" src="http://economictimes.indiatimes.com/thumb/msid-20749535,width-640,resizemode-4/images-of-years-largest-full-moon-from-around-the-world.jpg" />
</div>
JS 代码如下所示:
$.fn.extend({
//custom event - creates a slideshow using a recursive setTimeout()
//delay - the time delay
"slideShow": function (delay) {
//find images
var img = this.find("img"),
//get the length
i = img.length;
//hide all first time
img.hide();
//start the loop
(function loop() {
setTimeout(function () {
img.hide();
$(img[i]).fadeToggle("slow");
if (i > 0) {
i--;
} else {
i = img.length;
}
console.log(i);
loop();
}, delay);
})();
}
});
所以你可以在 div 上这样调用它:
$(function () {
$("#container").slideShow(1000);
});
关于javascript - 如何创建 jQuery 应用程序以在页面加载后立即显示一组图像的幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17898767/