我正在制作我的第一个网站而且我遇到了一个我无法轻易解决的问题，因为我不确定如何用谷歌搜索它。我需要将图像滑动到页面而不显示滚动条，或者更确切地说，没有页面在宽度上扩展以包含新出现的图像。
这是页面的实际测试版本：
http://test.dingac.com/accommodation.html
我需要帮助的部分是当您单击住宿选项卡中每个公寓的蓝图旁边的箭头时滑动图片。如果你想查看代码，相关代码在JqueryAnimate.js文件中，但请记住，注释不是英文，我是新手，所以代码有点奇怪，CSS不是'调整好了。我已将相关的代码段进一步向下发布。我目前的问题是幻灯片动画。我现在这样做的方式是从一开始就将所有图像都存在，但除了一个之外的所有图像都显示：无。单击右侧的箭头时，它会淡出并滑出当前图片（使用Jquery）并打开下一张图片（相对位于左侧：2000px）的显示，同时将其设置为左侧：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
尝试用overflow:hidden在span上添加id="apImgBox"