Программная прокрутка изображений на веб-сайте

Question

Я пытаюсь настроить веб-сайт с помощью HTML и JavaScript, который отображает разделы изображения за раз, и, щелкая по кнопкам или разделам изображения, выделит другой раздел изображение.

| ----- | | ----- | | ----- |
| --A- | | --B- | | --C- |
| ----- | | ----- | | ----- |

Если изображение, образованное конкатенацией A, B и C, я хочу отображать только одну секцию, AB или C за раз, и нажав кнопку, выделите ее, чтобы отобразить ее влево или право. Поэтому, если отображается B, и я нажимаю кнопку внутри B, я хочу, чтобы браузер прокручивал вправо, отображая C.

Я думаю, что могу сделать это, имея три изображения рядом друг с другом, достаточно далеко друг от друга что одна с другой стороны не будет отображаться и использовать javascript, чтобы скрыть кнопки прокрутки, а затем использовать javascript для прокрутки к html-якорю, который указывает местоположение изображения.

Однако у меня возникли проблемы с получением изображений на экране. Если моя маленькая схема будет работать, мне нужно поместить A off screen влево, а C выключить экран вправо. Как я могу это сделать через HTML? Могу ли я сделать это через HTML? Есть ли лучший способ получить функциональность, которую я хочу?

Спасибо!

Answer 1

Это может быть возможно с использованием чистого HTML + CSS с использованием якорей, но более надежным способом является введение некоторого JavaScript внутри. Я полагаю, вы пытаетесь сделать что-то визуально привлекательным, так что некоторые анимации могут не повредить.

Вам не нужно помещать изображения с экрана. A div с overflow, установленный в hidden, будет отлично. Просто сделайте div настолько же широко, как один из ваших сегментов. Тогда вам просто нужно оживить поля внутреннего изображения. Если вы знаете, JQuery, это может помочь:

CSS

div { 
    width: 300px; 
    heigth: 500px; 
    overflow: hidden; 
} 

HTML

The #images DIV имеет образ, который содержит изображения A, B и C.

<div id="images"> 
    <img src="abc.jpg" width="900" height="500" /> 
</div> 

jQuery

$('div#images img').click(function() { 
    var marginLeft = parseInt($(this).css('margin-left')); 
    var newMarginLeft = marginLeft - 300; 
    if(newMarginLeft >= $(this).width()) { 
     newMarginLeft = 0; 
    } 

    $(this).animate({ 
     marginLeft: newMarginLeft 
    }, 500); 
    return false; 
}); 

Надеюсь, это поможет. Обратите внимание, что у вас нет , чтобы разместить их на одном изображении, это всего лишь один из способов сделать это. У вас также может быть внутренний div и изображения отдельно, и вы можете оживить этот внутренний div. Это зависит от вас.