我正在尝试创建一个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);
});
演示：http://jsfiddle.net/hungerpain/R8UzD/