我正在使用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>
最佳答案
每次您切换<img>源时，由于没有显式设置width和height属性，因此页面将重新排列布局。切换新图像SRC时，它将宽度/高度设置为0x0，然后在图像加载完成后恢复为完整尺寸。
设置一个明确的宽度和高度，这样它就不会在每个图像开关之间调整图像大小（从而更改布局）。