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

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


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

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

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

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


Для этого необходимо чтобы картинки имели одинаковую ширину кадра, например 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 - 13 января 2012 12:45 -

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

coolrsm
Юзер

coolrsm - 21 января 2012 13:14 -

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

Sander
PHP-developer

Sander - 21 января 2012 20:16 -

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

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

Telegram: @sandev
Skype: Sander8804

Johny
Юзер

Johny - 13 мая 2016 17:55 -

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

Railway_Academy
Юзер

Railway_Academy - 3 сентября 2017 22:52 -

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх