Question

我的第一篇文章，如果格式错误，请道歉。

我有一个项目，我尝试使用Javascript创建幻灯片。我已将图像放入阵列并使幻灯片显示运行。

我面临的问题是图像比视口大得多。我查看了this帖子以及this帖子和其他许多帖子。它们解决了重新调整大小的问题，但不适用于数组中的图像，或者解决方案需要在HTML中添加图像，这不是我想要做的。我试图使用CSS，但它不起作用并使用

在javascript中添加行

$（＆＃34;＃libImage＆＃34;）。style.width =＆＃39; 50％＆＃39 ;;
$（＆＃34;＃libImage＆＃34;）。style.height =＆＃39; auto＆＃39;;

只会改变您可以看到的图像大小，而不是图像本身。这对于我尝试做的事情甚至是可能的，如果是这样，我应该使用它的哪个和哪里得到我想要的结果？

非常感谢您的帮助。

HTML

<div id="libImage"></div>

的Javascript

var images = ["../images/lib-orange.jpg", "../images/lib-main.jpg", "../images/lib-powel.jpg", "../images/lib-ostrander.jpg"];

    $(function () {
        var i = 0;
        $("#libImage").css("background", "url(images/" + images[i] + ")");
         setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("#libImage").fadeOut("slow", function () {
                $(this).css("background", "url(images/" + images[i] + ")");
                $(this).fadeIn("slow");
            });
        }, 3000);
    });

感谢您的回复，对此感到抱歉。它与我得到的效果不一样，但同样的问题。图片未显示为缩放到视口的大小。

https://jsfiddle.net/e6ywm5j2/5/

Answer 1

而不是background: url()我使用了img标记

<div id="libImage"><img src="" ></div>

并将$("#libImage").css("background", "url(images/" + images[i] + ")");替换为$("#libImage img").prop("src", images[i]);

css的变化是：

div { width: 100%; height: 100vh; text-align: center; }

img {
  max-height: 90%;
  max-width: 90%;
}

Demo

调整JavaScript数组中幻灯片图像的大小以适合视口

1 个答案: