JS图片轮播时fadeOut未完成fadeIn开始导致图片扩张模块出现空白问题

问题描述：JS图片轮播时fadeOut未完成fadeIn开始导致图片扩张模块出现空白问题

HTML

<div class="r-banner fl ">
                        <ul class="NVOD">
                            <li><img src="./img/1.jpeg" alt="logo"></li>
                            <li class="hide"><img src="./img/2.jpeg" alt="logo"></li>
                            <li class="hide"><img src="./img/3.jpg" alt="logo"></li>
                        </ul>
                        <span class="prev"></span>
                        <span class="next"></span>
                </div>
            </div>

CSS

.r-banner {
    overflow: hidden;
}
.NVOD img{
    width: 980px;
    height: 450px;
}
.hide{
    display: none;
}

JS

var index = 0;
$(document).ready(function () {
    setInterval("next()", 4000)
}
);
function next() {
    $("ul.NVOD li:eq(" + index + ")").fadeOut(1500);
    if (index == 2)
        index = 0;
    else
        index++;
    $("ul.NVOD li:eq(" + index + ")").fadeIn(1500);
}
function last() {
    $("ul.NVOD li:eq(" + index + ")").fadeOut(1000);
    if (index == 0)
        index = 2;
    else
        index--;
    $("ul.NVOD li:eq(" + index + ")").fadeIn(1000);
}

原因分析：

r-banner模块未设置宽高，被子元素扩充

解决方案：

CSS

.r-banner {
    width:980px;
    height:450px;
    overflow: hidden;
}
.NVOD img{
    width: 980px;
    height: 450px;
}
.hide{
    display: none;
}