我正在制作我的第一个网站，我遇到了一个我无法轻松解决的问题，因为我不确定如何措辞谷歌搜索它。我需要在不显示滚动条的情况下将图像滑入页面，或者更确切地说，在页面滑入时不扩展宽度以包含新出现的图像。
以下是该页面的实际测试版本：
http://test.dingac.com/accommodation.html
我需要帮助的部分是当您单击住宿选项卡中每个公寓蓝图旁边的箭头时，图片的滑动。 如果你想看代码，相关代码在 JqueryAnimate.js 文件中，但请记住，注释不是英文的，我是新手，所以代码有点奇怪，CSS 还没有微调。我已经在下面发布了相关的代码片段。我目前的问题是幻灯片动画。我现在的做法是让所有图像从一开始就在那里，但除了一个之外，所有图像都有显示：没有。当您单击右侧的箭头时，它会淡出并滑出当前图片(使用 Jquery)，并打开下一张图片的显示(相对位于左侧：2000px)，同时将其动画化为 left：0px。 在新图像出现的那一刻，页面会看到页面上有新元素，而不是显示所有内容，因此它会扩展页面的宽度以包含屏幕外图片。这只是桌面上的烦恼，因为它只会显示滚动条，但在移动设备上，它会使整个页面缩小，直到新图片出现在屏幕上，然后在图片滑入时放大。
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
我需要的是页面宽度保持不变，或者更具体地说，移动设备上没有放大，桌面上没有水平滚动条。
在 CSS 中使用overflow: hidden(或者，为了更细粒度的控制，overflow-x: hidden)。
例如，如果这是您网页的 HTML：
<body>
<div id="page-wrap">
Contents
</div>
</body>
您可以使用如下overflow：
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
链接到 MDN
尝试在span上添加一个带有id="apImgBox"的overflow:hidden