考虑我有三个图像和一个bannerDiv...在初始页面加载时，我应该显示第一张图像，并在超时后说300ms 我必须显示第二张图片，反之亦然......
我必须模糊第一个图像并显示第二个图像......任何建议如何使用jquery来完成它......
<div Id="BannerDiv">
<img src="mylocation" alt="image1"/>
<img src="mylocation" alt="image2"/>
<img src="mylocation" alt="image3"/>
</div>
我的 jquery 函数是，
<script type="text/javascript">
$(document).ready(function() {
//how to show first image and blur it to show second image after 300 ms
});
</script>
编辑:
第一个图像在300ms后淡出并显示第二个图像
第二张图像在300ms后淡出并显示第三张图像
第三张图像在 300ms 后淡出并显示第一张图像....
第二次编辑:
我使用了 nick，但没有发生任何事情..
<body>
<form id="form1" runat="server">
<div>
<div Id="BannerDiv">
<img src="Images/banner3.jpg" alt="image1" width="954" height="327"/>
<img src="Images/ban_main_25.jpg" alt="image2" width="954" height="327"/>
<img src="Images/banner_25.jpg" alt="image3" width="954" height="327"/>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#BannerDiv > :first').show();
setTimeout(rotate, 1000);
});
function rotate() {
var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
setTimeout(rotate, 300);
}).next().css({ 'z-index': 1 }).show();
if (c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}
</script>
</form>
</body>
还有CSS
#BannerDiv {width: 954px; height: 327px;}
#BannerDiv img {position: absolute; width: 954px; height: 327px; display: none;}
最佳答案
这里有一个快速的方法:
$(function() {
$('#BannerDiv > :first').show();
setTimeout(rotate, 1000);
});
function rotate() {
var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
setTimeout(rotate, 3000);
}).next().css({ 'z-index': 1 }).show();
if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}
您需要以下 CSS 来匹配(根据您的尺寸调整尺寸):
#BannerDiv {width: 400px; height: 200px;}
#BannerDiv img {position: absolute; width: 400px; height: 200px; display: none;}
关于div 中的 Jquery 图像模糊效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2578018/