Начал изучение jQuery. Сделал простой слайдер. В планах - сделать генератор слайдеров с back-end'ом на Django. Вот исходники слайдера (можете считать, что лицензия GNU GPL :-) ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изучаем jQuery</title>
<!-- подключаем JQuery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- jQuery Timers - плагин для таймеров -->
<script type="text/javascript" src="js/jquery.timers.js"></script>
<!-- Стиль лучше класть в отдельный файл, как и скрипт. Но здесь, для наглядности примера, я слил всё в один файл -->
<style>
.invisible{
display: none;
}
</style>
<script type="text/javascript">
/* когда документ будет загружен, начнётся выполение анонимной функции */
$(document).ready(function(){
var active = 1; // индекс следующего отображаемого слайда
$(document).everyTime(5000, function(){ /* каждые 5 секунд. Функция взята из плагина jQuery Timers */
$("#slider dt").each(function(i){ /* обходим все элементы немаркированного списка */
if (i != active) $(this).slideUp(); /* анимированно убрать слайд, если он не активный */
else $(this).slideDown(); /* иначе анимированно показать слайд */
});
/* вычисляем, какой слай будет следующий */
if (active != 2) active++;
else active = 0;
});
});
</script>
</head>
<body>
<p>
Простейший слайдер на jQuery.
</p>
<div id="slider">
<dl>
<dt>
<img src="img/apple.jpg" />
<br />
<span>Apple Computers</span>
</dt>
<dt class="invisible">
<img src="img/google.jpg" />
<br />
<span>Google Incorporated</span>
</dt>
<dt class="invisible">
<img src="img/microsoft.jpg" />
<br />
<span>Microsoft Corporation</span>
</dt>
</dl>
</div>
</body>
</html>
Для того, что бы слайдер заработал, понадобиться скачать jQuery, плагин к нему jQuery Timers и фотки. У меня они размером 640x480. Искал через Google по названиям трёх гигантов IT-рынка.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изучаем jQuery</title>
<!-- подключаем JQuery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- jQuery Timers - плагин для таймеров -->
<script type="text/javascript" src="js/jquery.timers.js"></script>
<!-- Стиль лучше класть в отдельный файл, как и скрипт. Но здесь, для наглядности примера, я слил всё в один файл -->
<style>
.invisible{
display: none;
}
</style>
<script type="text/javascript">
/* когда документ будет загружен, начнётся выполение анонимной функции */
$(document).ready(function(){
var active = 1; // индекс следующего отображаемого слайда
$(document).everyTime(5000, function(){ /* каждые 5 секунд. Функция взята из плагина jQuery Timers */
$("#slider dt").each(function(i){ /* обходим все элементы немаркированного списка */
if (i != active) $(this).slideUp(); /* анимированно убрать слайд, если он не активный */
else $(this).slideDown(); /* иначе анимированно показать слайд */
});
/* вычисляем, какой слай будет следующий */
if (active != 2) active++;
else active = 0;
});
});
</script>
</head>
<body>
<p>
Простейший слайдер на jQuery.
</p>
<div id="slider">
<dl>
<dt>
<img src="img/apple.jpg" />
<br />
<span>Apple Computers</span>
</dt>
<dt class="invisible">
<img src="img/google.jpg" />
<br />
<span>Google Incorporated</span>
</dt>
<dt class="invisible">
<img src="img/microsoft.jpg" />
<br />
<span>Microsoft Corporation</span>
</dt>
</dl>
</div>
</body>
</html>
Для того, что бы слайдер заработал, понадобиться скачать jQuery, плагин к нему jQuery Timers и фотки. У меня они размером 640x480. Искал через Google по названиям трёх гигантов IT-рынка.
Комментариев нет:
Отправить комментарий