Я создаю свой первый веб-сайт, и у меня возникла проблема, которую я не могу легко исправить, так как не знаю, как сформулировать поиск в Google.Мне нужно вставить изображения на страницу без появления полосы прокрутки или, вернее, без увеличения ширины страницы, чтобы охватить вновь появившееся изображение, пока оно скользит.
Вот фактическая тестовая версия страницы:
http://test.dingac.com/accommodation.html
Часть, в которой я нуждаюсь, - это скольжение фотографий, когда вы нажимаете на стрелки рядом с планом для каждой квартиры на вкладке размещения.Если вы хотите посмотреть на код, соответствующий код находится в файле JqueryAnimate.js, но имейте в виду, комментарии не на английском языке, я новичок в этом, поэтому код немного странный, а CSS неТочно настроен еще.Я разместил соответствующий фрагмент кода ниже.Моя текущая проблема - анимация слайдов.Я сделал это прямо сейчас, чтобы все изображения были с самого начала, но все, кроме одного, имеют отображение: ни одного.Когда вы щелкаете стрелку вправо, она исчезает и выдвигает текущее изображение (используя Jquery) и включает отображение следующего изображения (которое расположено относительно слева: 2000 пикселей), а его анимация слева: 0 пикселей.В тот момент, когда появляется новое изображение, страница видит, что на странице появился новый элемент, и не все отображается, поэтому он расширяет ширину страницы, чтобы охватить изображение вне экрана.Это раздражает только на рабочем столе, так как на нем появляется только полоса прокрутки, но на мобильном телефоне она уменьшает всю страницу до тех пор, пока на экране не появится новое изображение, а затем увеличивает масштаб по мере того, как изображение скользит.
$("#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");
}
}
});
Мне нужно, чтобы ширина страницы оставалась постоянной или, более конкретно, чтобы не было масштабирования в мобильном устройстве и горизонтальной полосы прокрутки на рабочем столе.