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);
これを行うより良い方法はありますか?