フェードアウト機能が発生しないように、以下のコードを変更しようとしています。次の画像を既存の画像の上にフェードインさせたい。フェードアウト機能を削除しようとしたのですが、うまくいきません。
$(function () {
var changeTime = 5000;
var speed = 1500;
var slider = $("#imageSlide"),
listItems = slider.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, changeTime);
});
私が持っているCSSは次のとおりです。
#imageSlide {
margin:0;
padding:0;
}
ul#imageSlide {
list-style:none;
list-style-image:none;
margin-left:0px;
}
li#imageSlide {
position:absolute;
top:0;
left:0;
}
HTML マークアップは次のとおりです。
<ul id="imageSlide">
<li><img alt="" src="/Images/image1.jpg" /></li>
<li><img alt="" src="/Images/image2.jpg" /></li>
<li><img alt="" src="/Images/image3.jpg" /></li>
<li><img alt="" src="/Images/image4.jpg" /></li>
<li><img alt="" src="/Images/image5.jpg" /></li>