Question

我正在使用javascript在我的JSP上显示幻灯片。在幻灯片中，图片每隔3秒就会淡化和淡出。在图片的每次转换中，整个jsp都会抖动。我也将图片裁剪成相同的尺寸，并且装载的重量不会很大。

我的javascript代码是： -

<script type="text/javascript">
        var imgs = [
        'images/tern.jpg',
        'images/airplane.JPG',
        'images/sf_night.jpg',
        'images/aerial.jpg',
        'images/airbusa380.jpg'];
        var cnt = imgs.length;

        $(function () {
            setInterval(Slider, 3000);
            var $imageSlide = $('img[id$=imageSlide]');
            // set the image control to the last image
            $imageSlide.attr('src', imgs[cnt - 1]);
        });
        function Slider() {
            $('#imageSlide').fadeOut("slow", function () {
                $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
            });
        }
</script>

然后在身体我称之为： -

<body>
<div>
<img id="imageSlide" alt="" src="" />
</div>
</body>

Answer 1

每次切换<img>源时，页面都会重新布局布局，因为您没有明确设置width和height属性。当切换新图像SRC时，它将宽度/高度设置为0x0，然后在图像完成加载后返回到完整尺寸。

设置明确的宽度和高度，使其不会调整每个图像开关之间的图像大小（从而改变布局）。

使用javascript幻灯片中的图片转换整页震动

1 个答案: