使用javascript在幻灯片中转换图片时，整个页面都会抖动
我正在使用javascript在JSP上显示幻灯片。在幻灯片中，图片每3秒淡入淡出一次。在图片的每次变换中，整个jsp都会震动。我也把图片裁剪成了同样的大小，而且没有那么重 我的javascript代码是：-使用javascript在幻灯片中转换图片时，整个页面都会抖动,javascript,jsp,slideshow,Javascript,Jsp,Slideshow,我正在使用javascript在JSP上显示幻灯片。在幻灯片中，图片每3秒淡入淡出一次。在图片的每次变换中，整个jsp都会震动。我也把图片裁剪成了同样的大小，而且没有那么重 我的javascript代码是：- <script type="text/javascript"> var imgs = [ 'images/tern.jpg', 'images/airplane.JPG', 'images/sf_night.jpg
<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>
var imgs=[
“images/tern.jpg”，
“images/airplane.JPG”，
“images/sf_night.jpg”，
“images/air.jpg”，
'images/airbusa380.jpg']；
var cnt=imgs.长度；
$（函数（）{
设置间隔（滑块，3000）；
var$imageSlide=$（'img[id$=imageSlide]'）；
//将图像控件设置为最后一个图像
$imageSlide.attr（'src'，imgs[cnt-1]）；
});
函数滑块（）{
$（“#图像幻灯片”）。淡出（“慢”，函数（）{
$（this.attr（'src'，imgs[（imgs.length++）%cnt]）.fadeIn（“slow”）；
});
}
<body>
<div>
<img id="imageSlide" alt="" src="" />
</div>
</body>
每次切换
设置一个明确的宽度和高度，这样它就不会在每次图像切换之间调整图像大小（从而改变布局）。每次切换
设置一个明确的宽度和高度，这样它就不会在每个图像开关之间调整图像大小（从而改变布局）。您是否在某个地方设置了硬编码的图像宽度/高度？它可能会在每次加载新图像时尝试重新流动页面，因为它会在重置SRC时将页面设置为0x0，然后在图像完成加载后将页面设置为全尺寸。不，我没有硬编码图像尺寸。我先用photoshop把它们裁剪成相同的大小，然后在eclipse中导入。然后试着在
标签上设置宽度和高度，看看是否可以解决这个问题。酷。因为它解决了这个问题，所以我把它作为问题的答案添加了进来，这样你就可以把它标记为已回答。你有没有在某个地方设置硬编码的图像宽度/高度？它可能会在每次加载新图像时尝试重新流动页面，因为它会在重置SRC时将页面设置为0x0，然后在图像完成加载后将页面设置为全尺寸。不，我没有硬编码图像尺寸。我先用photoshop把它们裁剪成相同的大小，然后在eclipse中导入。然后试着在
标签上设置宽度和高度，看看是否可以解决这个问题。酷。因为它解决了这个问题，所以我把它作为问题的答案添加进去，这样你就可以把它标记为已回答。