我想每 3 秒更改一次图像,但是在更改时我想制作淡入淡出效果,为此我正在这样做:
<script type="text/javascript">
var images = [];
images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg";
images[1] = "http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg";
images[2] = "http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg";
images[3] = "http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg";
images[4] = "http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg";
images[5] = "http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg";
var loop;
var i = 0;
$(document).ready(function() {
setTimeout(fadeDivs, 3000);
});
function fadeDivs()
{
$('.product img').attr('src',images[i]).fadeOut(100);
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
}
</script>
和:
<section id="product">
<article class="product">
<img src="http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg" />
</article>
</section>
但是不起作用,我认为问题出在
$('.product img').attr('src',images[i]).fadeOut(100);
有一个更好的方法吗?