gpt4 book ai didi

javascript - 在幻灯片中使用 javascript 转换图片时,整个页面都会抖动

转载 作者:行者123 更新时间:2023-11-30 06:45:15 27 4
gpt4 key购买 nike

我正在使用 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 中,我称之为:-

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

最佳答案

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

设置明确的宽度和高度,这样它就不会在每次图像切换之间调整图像大小(从而改变布局)。

关于javascript - 在幻灯片中使用 javascript 转换图片时,整个页面都会抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7532632/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com