+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Плавная смена изображений с помощью jQuery

В этой статьей мы расмотрим простой пример плавной смены одного изображения на другое. Что нам понадобится?

Два файла js:
jquery.js
cycle.js.

А также несколько картинок, у нас они лежат в папке pic:
pic/1.jpg,
pic/2.jpg,
pic/3.jpg

Наши картинки будут заключены в тег <div> с идентификатором slider
Пишем код
<!DOCTYPE html>
<html>
<head>
<title>Смена</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
$(document).ready(function()
{
$('#slider').cycle({
timeout: 4000,
});
});
-->
</script>
</head>
<body>
<div id="slider">
<img src="pic/1.jpg" alt="" width="240" height="320" />
<img src="pic/2.jpg" alt="" width="240" height="320" />
<img src="pic/3.jpg" alt="" width="240" height="320" />
</div>
</body>
</html>

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 12167