Question

我在我的网站上使用过以下幻灯片。但我不想要更改时显示的空白屏幕（淡入淡出图像）。有人可以帮我吗？

http://www.serie3.info/s3slider/demonstration.html http://www.serie3.info/s3slider/

提前致谢

Answer 1

通过css为<div>标记背景图片。

e.G。对于Slider One（示例1）：

#slider {
  background-image: url('/images/my-background-image.png');
}

Answer 2

在评论部分中，有人在链接网站上提出了这个问题。

任何身体知道如何阻止图像停止完全淡出？我想要一个停止帧动画的外观，所以在前一个图像淡出之前需要下一个图像淡入。有任何想法吗？

然后另一个用户回复：

我是通过在s3slider.js中添加一行来完成的，如下所示。

你应该尝试一下，我无法测试它（评论中的反馈大多是积极的，所以它似乎有效）。用户'pedro costa'发布的代码：

var makeSlider = function() {
        current = (current != null) ? current : items[(items.length-1)];
        var currNo      = jQuery.inArray(current, items) + 1
        currNo = (currNo == items.length) ? 0 : (currNo - 1);
        var newMargin   = $(element).width() * currNo;
        if(faderStat == true) {
            if(!mOver) {
                $(items[currNo]).fadeIn((timeOut/6), function() {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            faderStat = false;
                            current = items[currNo];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    } else {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            faderStat = false;
                            current = items[currNo];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    }
                });
            }
        } else {
            if(!mOver) {
                //added next line
                $(items[(currNo)]).parent().parent().css('background-image', 'url('+$(items[(currNo)]).children("img").attr("src")+')');
                // added previous line
                if($(itemsSpan[currNo]).css('bottom') == 0) {
                    $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                            faderStat = true;
                            current = items[(currNo+1)];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    });
                } else {
                    $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                            faderStat = true;
                            current = items[(currNo+1)];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    });
                }
            }
        }
    }

jquery幻灯片显示想要删除更改图像时显示的白屏

2 个答案: