Question

好的，大家，我是jQuery的总菜鸟，但我正在学习，我试图研究并实现一个非常简单的幻灯片。看起来如此：

<script type="text/javascript">
    var imgs = [
    '../Images/Slideshow/01.jpg',
    '../Images/Slideshow/02.jpg',
    '../Images/Slideshow/03.jpg',
    '../Images/Slideshow/04.jpg',
    '../Images/Slideshow/05.jpg',
    '../Images/Slideshow/06.jpg',
    '../Images/Slideshow/07.jpg'];
    var cnt = imgs.length;

    $(function () {
        setInterval(Slider, 3000);
    });



    function Slider() {
        $('#imageSlide').fadeOut(3000, function () {
            $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn(2000);
        });
    }
</script>

我在身体内有这个：

<img id="imageSlide" alt="" src="" height="450" width="450" border="0" />

它的运行目的不错，但是在开始幻灯片播放之前，它开始时会有一个空的空白方形图像框，持续几秒钟，这有点令人厌烦。有没有一种简单的方法来解决这个问题？

Answer 1

页面加载时，图片标记中的src为空白，因此您需要填写如下图像：

    $('#imageSlide').prop('src','../Images/Slideshow/01.jpg');

Answer 2

调用Slider（）;紧接在setInterval（）;

之前

Answer 3

<img id="imageSlide" alt="" src='../Images/Slideshow/01.jpg' height="450" width="450" border="0" />

现在将第一个图像的源作为数组中的最后一个，如下所示

<script type="text/javascript">
    var imgs = [
    '../Images/Slideshow/02.jpg',
    '../Images/Slideshow/03.jpg',
    '../Images/Slideshow/04.jpg',
    '../Images/Slideshow/05.jpg',
    '../Images/Slideshow/06.jpg',
    '../Images/Slideshow/07.jpg',
    '../Images/Slideshow/01.jpg'];
    var cnt = imgs.length;

    $(function () {
        setInterval(Slider, 3000);
    });



    function Slider() {
        $('#imageSlide').fadeOut(3000, function () {
            $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn(2000);
        });
    }
</script>

jQuery首先在幻灯片中加载空图像

3 个答案: