考慮我有three images
和one bannerDiv
....在初始頁面加載我應該顯示第1圖像和sometimeout後說300ms
我必須顯示第二圖像,反之亦然.... 我必須blur
第一形象和表演第二圖像....任何建議如何能與jQuery做...在div中的jquery圖像模糊效果?
和我的jQuery的功能,
<script type="text/javascript">
$(document).ready(function() {
//how to show first image and blur it to show second image after 300 ms
});
</script>
編輯:
1圖像300ms
後淡出,並顯示第二圖像
第二圖象300ms
後淡出,並顯示圖像3
3圖像300ms
後淡出,並顯示第一圖象....
第二個編輯:
我用尼克的,但沒有發生..
<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;}
你是什麼意思的「模糊」? – 2010-04-05 11:14:18
@尼克淡入淡出效果 – bala3569 2010-04-05 11:17:15
爲什麼你將圖片註釋掉了? ''% - ' 這個CSS也是'#BannerDiv img',不是div(就像在我的回答中)供你使用:) – 2010-04-05 12:26:56