Смена картинки при нажатии
Подскажите, как сделать, чтобы при нажатии на картинку она менялась на следущую?
3 ответа 3
Если понимать вас буквально, то примерно вот так:
Тебе нужно перенести блок с скриптом в конец body. т.к. HTML страница рендерится по очереди кода. ниже пример где должно работать:
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
ИсточникЦиклическое слайд-шоу на чистом CSS3
Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
Как сделать так чтобы обои менялись сами
Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.
Разделы статьи
- Введение
Описание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам. - Разметка HTML
Создание HTML-разметки для слайдера изображений. - Стили CSS
Создание таблицы стилей для отображения слайдера. - CSS3-анимация по ключевым кадрам
Добавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь. - Индикатор выполнения
Добавление индикатора выполнения для нашего слайдера. - Всплывающая подсказка
Добавление всплывающей подсказки, для отображения заголовков. - CSS3-переходы
Выводим подсказку при наведении курсором, используя CSS3-переходы - Пауза и рестарт
Остановка слайдера при наведении курсором. - Демонстрация
Показываем слайдер в действии. - Заключение
Заключительные размышления.
1. Введение
Для использования этого урока необходимо иметь базовое понимание CSS, в частности CSS3-переходов и анимации по ключевым кадрам.
Оперируя этими простыми понятиями, мы увидим, как сделать функциональный слайдер изображений.
Базовые понятия CSS3-переходов
Обычно, когда вы изменяете значение CSS, изменения отображаются статично. Теперь, благодаря свойству перехода, мы можем с легкостью производить изменения от одного состояния к другому.
Мы можем использовать четыре свойства перехода:
Урок 5. Javascript. Практика для начинающих. Изменение картинки
transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.
transition-duration
Определяет время, за которое должен произойти переход.
transition-timing-function
Определяет, как вычислены промежуточные значения перехода.
transition-delay
Определяет, когда переход запускается.
В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров. Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.
Давайте посмотрим, как применить простой переход к ссылке:
Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
Базовые понятия CSS3-анимации
CSS-анимация позволяет нам создавать анимацию без JavaScript при помощи набора ключевых кадров.
В отличие от CSS-переходов, анимация по ключевым кадрам в настоящее время поддерживается только в WebKit-браузерах, Firefox, а также в скором времени и в IE 10. Неподдерживаемые браузеры просто проигнорируют код анимации.
У свойства анимации есть восемь подсвойств:
animation-delay
Определяет, когда анимация запускается.
animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.
animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.
animation-iteration-count
Определяет количество циклов анимации перед остановкой.
animation-play-state
Определяет, проигрывается ли анимация или приостановлена.
animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.
Давайте посмотрим, как применить простую анимацию к блоку:
Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
Ключевые кадры
Каждый ключевой кадр описывает, как анимированный элемент должен вести себя в данной временной точке анимации. Ключевые кадры принимают процентные значения, чтобы определить время: 0% — запуск анимации, в то время как 100% — конец. Вы можете дополнительно добавить промежуточные кадры для анимаций.
У W3C есть много полезной и подробной информации про “CSS3-анимацию”
Базовая структура нашего слайдера
Теперь, когда мы знаем, как функционируют переходы и анимация, давайте посмотрим, как создать наш слайдер, используя только CSS3. Этот эскиз показывает, как анимация должна работать:
Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства » top «, » z-index » и » opacity «.
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.
2. HTML-разметка
Разметка HTML очень проста. Она четко организована и благоприятна для SEO. Давайте сначала посмотрим полный код, а затем подробно выясним, как все работает.
div
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.
li
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.
div
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.
div
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.
Теперь пришло время к формированию CSS-файла.
3. Стили CSS
Давайте создадим базовую структуру слайдера. У него будет тот же размер, что у изображения. Свойство границы будет полезно для создания рамки вокруг изображения.
Класс » mask » скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.
Наконец, чтобы отсортировать список изображений, будем использовать » position: absolute » и » top: -325px » так, чтобы все изображения были расположены за пределами слайдера.
Этими немногими строками кода, мы сделали разметку слайдера. Теперь мы просто должны добавить анимацию.
4. CSS3-анимация по ключевым кадрам
Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5;
Определяем продолжительность анимации для каждого изображения: 5 секунд;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4%,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.
Со всей этой математикой мы можем теперь применить CSS-анимацию к слайдеру. Мы можем поместить анимацию в бесконечный цикл, т.к. для каждого изображения будет задана отдельная анимация, не зависящая от остальных изображений.
Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства » opacity » и » z-index «, чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.
Вот весь код для анимаций:
Создав анимацию, мы должны добавить индикатор выполнения, чтобы вывести на экран продолжительность каждой анимации.
5. Индикатор выполнения
Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:
Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.
6. Всплывающая подсказка
Слайдер более или менее завершен. Давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы вставим всплывающие подсказки для заголовков изображений, которые будут видимы при наведении курсором.
Стили для подсказок:
Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.
7. CSS3-переходы
Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.
8. Пауза и рестарт
Чтобы позволить пользователям остановить слайдер, для просмотра содержиого, мы должны останавливать анимацию, при наведении курсором. Также мы должны будем остановить анимацию индикатора выполнения.
9. Демонстрация
Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%!
Посмотрите демонстрацию слайдера (Альтернативный источник). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив (Альтернативный источник).
Спасибо Massimo Righi за его изображения.
10. Заключение
Эффект внушителен, но по общему признанию, этот слайдер не очень универсален. Например, чтобы добавить больше изображений, необходимо отредактировать все ключевые кадры. У CSS3 есть большой потенциал, но у него действительно есть пределы, и иногда JavaScript более предпочтителен, в зависимости от целевой аудитории.
У этого слайдера есть некоторые интересные функции, такие как пауза (при наведении) и уникальные ссылки для изображений, которые позволяют пользователям взаимодействовать со слайдером. Если необходима полная поддержка всеми браузерами, то использование CSS3 не возможно, таким образом, рекомендуется JavaScript. К сожалению, у CSS3-анимации есть много ограничений. На данный момент, из-за нехватки гибкости, мы не имеем возможности широкого использования. Надеюсь, эта статья будет стимулировать вас к дальнейшему изучению CSS3.
Не стесняйтесь делиться мыслями в комментариях.
От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.
Три способа сделать так, чтобы картинка менялась при наведении курсора мыши
Многие веб-мастера на своих сайтах в меню или на кнопках используют такой эффект, когда картинки меняются при наведении на них курсора мышки. Если вас интересует, как осуществить такой эффект, то в этой статье, я расскажу о трех способах, с помощью которых можно сделать так, чтобы картинка менялась при наведении на нее курсора мыши.
Использую чистый CSS, без JavaScript и jQuery.
Способ №1 – использование двух картинок
Подготовьте два изображения. Они должны быть одинаковых размеров, но различными по цвету.
Теперь вставим эти две кнопки в файл:
Способ №2 – использование одной картинки
Подготовьте одну картинку. Но на картинке должно быть два изображения кнопки разных по цвету.
Вы, наверное, задаете себе вопрос, как картинка будет меняться на другую, если она одна?! Легко, за счёт использования свойства background-position .
Замена одного изображения на другое происходит с помощью сдвига по вертикали. Вот и все чудеса! Смотрите на код:
Способ №3 – использование одной картинки и CSS-эффект
Возьмите картинку из способа №1, например, « knopka-1.png ». Здесь нам понадобится только одна картинка. При наведении на картинку мышкой сработает CSS-эффект. Смотрите на код:
ИсточникПри наведении на картинку, она меняется
Второй вариант, когда при наведении на картинку, она меняется
Третий вариант
Или благодаря тому, что размещаем один элемент под другим с помощью position: absolute (см. vagabundia.blogspot.com).
Последний предложенный Пункт 3.5. будет в разных браузерах отображаться по разному при наведении на картинку курсора, поскольку нет единой договорённости относительно сочетания transform: translate и transform-origin. Мне нравится больше вариант в Mozilla Firefox.
55 комментариев:
Morskaia Супер вещь:) Евгений Объясните, куда нужно вставлять те коды, которые вы приводите
Крутая вещь. NMitra Потренируйтесь сначала в теле сообщения (при написании/редактировании сообщения) на вкладке «HTML». В дальнейшем, если какой-либо вариант планируете распространить на все страницы, то стили CSS — код между
без тега style можно внести согласно этой статье http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html WeB XaSeR Оригинальны 3 и 5 варианты, прикольно.. А с кроссбраузерностью как? NMitra IE пока не поддерживает, в следующей версии (-ms-). NMitra Смена картинки будет происходить, только без эффектов. Ellis_Wood Это что-то новенькое!! класно=) Ольга У. Просто супер!
Черников Александр Спасибо! admin У вас в примере две фотки, попробовал добавить 3 фотку, а показывает все равно две. NMitra Всё верно. Одна картинка становится прозрачной, поэтому становится видна нижняя. Я не ставила перед собой цели сделать фотогалерею. Посмотрите здесь http://www.cssplay.co.uk/menu/click-gallery-previous-next.html, http://www.cssplay.co.uk/menu/cssplay-any-size-gallery.html . А стили можно добавить любые.
Анонимный Спасибо! Все получилось! NMitra Рада слышать. Ольга Корчёмкина Красота! Спасибо большое за идею! Буду использовать при необходимости. Оксана Все это очень интересно! Но у меня почему-то не получилось.
Что я делаю не так? Вроде все просто. NMitra Подробнее: страница где пробуете, какие картинки, что хотите добиться? NMitra Мне нужно наглядно увидеть что вы делаете. Ольга Спасибо за подробное описание, только не понятно, куда нужно этот скрипт вставить?
Если на страницу с картинкой, то ничего не получается. NMitra При написании статьи, вкладка «HTML». Добавьте код, напишите в комментариях страницу, где внесли изменения. Только тогда я смогу понять почему не получается. Марина Подскажите, пожалуйста, что делать для того, чтобы поверх меняющейся картинки получилось разместить «неменяющуюся»?
Придумала такой дизайн — а вот теперь релизовать не получается. Помогите, пожалуйста! NMitra Одной из картинок прописать псевдоэлементы с content: url(); — http://shpargalkablog.ru/2012/02/before-after-css.html Анонимный Помогите пожалуйста,решил вставить картинки первым способом, вставил 1 картинку с пареходом на вторую.
Захотел на той же странице еще вставить картинки, вставил другие совсем картинки НО ПОКАЗЫВАЮТ ДВЕ ПЕРВЫХ хотя в коде ссылки на другие картинки.
Как это исправить?
Александр, ICQ:387818339 NMitra Заменить на <>
Подробнее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html Асиля Крутоо:))) NMitra Согласна))) Ефименко Владислав Я новенький в этом деле) Не могли бы вы подсказать почему картинки не меняются плавно, как у вас? NMitra Мне нужно увидеть что вы для этого сделали. Покажите страницу. Lina А у меня получаются 2 картинки рядом, или одна и не меняется. Lina А в первом примере вообще ничего не появляется.
NMitra Покажите страницу с вашими экспериментами. Lina http://karen.arte-madeira.com.pt/# NMitra Вы стили CSS не прописываете. Не знаю вашу платформу, но, как правило, есть переключатель на HTML версию статьи. Код следует добавить именно там. Анонимный Подскажите, пожалуйста, а можно сделать так, чтобы при наведении картинка увеличивалась и сменилась на другую в этот момент как на сайте мегафона внизу? NMitra На скорую руку http://shpargalkablog.ru/2013/06/css.html
Если не нужна тень у картинок, то есть получиться ещё проще Анонимный агроменское спасибо Анонимный Спасибо. всё работает)) Sineoka Огромное спасибо. Так долго искала код, и только ваш заработал)) NMitra Рада, что всё удалось ) jeka Ели на одной странице несколько изображений с разными эффектами переходов, то все работают с эффектом последней картинки — почему, и как это исправить?
Заранее спамибо! NMitra class=»demo» для каждого эффекта свой
class=»demo izo1″
class=»demo izo2″
и следовательно
.izo1 img.raz -moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
> jeka Дело в том, что я чайник в CSS, не получается разобраться в Вашем ответе. Покажите пожалуйста на примере, буду премного благодарен. Хотел для примера загрузить то, что у меня — не получается. Какой то недопустимый тег.
Где что на что менять ума не приложу.
Спасибо что помогаете таким как я! jeka Простите за назойливость.
Сделал так: href=»#»> где 1;2;3 для разных эффектов
Соответственно в css там где demo то же проставил для разных эффектов 1;2;3
Все работает. NMitra С селекторами лучше разбираться на http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Наоборот, хорошо, что отписались! Kate Donskaya Здравствуйте, я новичок совсем)
подскажите пожалуйста,можно ли делать эффект перекатывания не с картинкой, а с текстом, и как?
Заранее спасибо большое!!)) Kate Donskaya И еще вопрос: по этому уроку с картинками все получилось, но как мне сделать эту картинку ссылкой на страницу? дело в том, что когда я вставляю адрес ссылки после значения href=»#», она работает, но некорректно: открывается указанная в ссылке страница прямо в поле с кодом! (с полями прокрутки по бокам)(((. NMitra Здравствуйте, измените html
Dmitry Khramov Super! NMitra Благодарю ) Serge Pol а плгины для ВП эсть такие??
NMitra Мне это не известно, предпочитаю чистый код JS или PHP Анонимный Скажите, как сделать чтобы одна картинка накладывалась на другую, т.е. чтобы первая не исчезала? NMitra См http://jsfiddle.net/NMitra/tqdfsytp/2/
Теория http://shpargalkablog.ru/2011/04/css-nalozhenie.html Unknown Я неправильно вопрос задал. Как сделать, чтобы при наведении на картинку появлялась другая картинка, при этом первая не исчезала. Хочу сделать светящуюся тень при наведении на картинку.
1-й вариант, делаю две разные картинки — «тень» и «картинка», тогда при наведении тень остается, а картинка исчезает.
2-й вариант, делаю две картинки, «картинка с тенью» и «картинка без тени», тогда при первом наведении исчезают обе картинки, только через несколько секунд начинает нормально работать. Даже если сайт был загружен 10 минут назад.
Источник