Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Слайдшоу из одного многокдрового изображения

Слайдшоу из одного многокдрового изображения


     картинка, слайдер, jquery    Общие вопросы по вёрстке, jQuery    4619

вопрос
Подскажите как организовать слайдшоу из одного изображения?
Слайдшоу из одного многокдрового изображения

чтобы при наведении картинки чередовались

Ответил: ПафНутиЙ


Для этого необходимо чтобы картинки имели одинаковую ширину кадра, например 150px.

HTML примерно такой:
<div class="block">
<img class="img" src="img.jpg" alt="" />
</div>
<div id="right">вперёд</div>
<div id="left">назад</div>

CSS:
.block {width: 150px; height: 100px; overflow: hidden;}

JS:
<script>
$("#right").click(function(){
  $(".img").animate({"left": "+=150px"}, "slow");
});

$("#left").click(function(){
  $(".img").animate({"left": "-=150px"}, "slow");
});

</script>


Нужно только добавить функцию, котораябудет проверять ширину картинки, и если она меньше, чем текущая позиция картинки, кнопка промотки становится неактивной.

5 комментариев

coolrsm
Юзер

coolrsm - -

огромное спасибо!!!а как сделать что при наведении они чередовались?

coolrsm
Юзер

coolrsm - -

подскажет кто нибудь?

Sander
PHP-developer

Sander - -

Подсказываю, написать обработчик события mouseenter

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Johny
Юзер

Johny - -

Извиняюсь за некрофилию, можно сделать на css с помощью animation. Вдруг кому понадобится. Пример тут спрайт прокрутка

Railway_Academy
Юзер

Railway_Academy - -

А как сделать если это не 5 изображений склеяных, а загруженные через доп. поле "Загружаемая галерея изображений"? Загрузил в доп. поле к примеру 10 картинок, как сделать чтобы при наведении на блок они перелистывались как в примере выше? Вот как на ютуб, наводишь на блок и показываются кадры из видео)

Похожие вопросы

наверх