Вход
Логин: Пароль:Забыли пароль?
Запомнить вас на этом компьютере?
Войти скрытым?

Здравствуйте, гость ( Вход | Регистрация )

 
Ответить в данную темуНачать новую тему
Самый простой слайдер картинок

Everybody
сообщение 1.4.2012, 4:29
Сообщение #1


Администратор
*******
Группа: Admin (root)
Сообщений: 2586
Регистрация: 16.10.2007
Пользователь №: 1
Спасибо сказали: 1700 раз(а)



Репутация:   12345  
Интервалом 3000мс сменяются указанные картинки
HTML
<!doctype html>
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>

<style>
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

</head>
<body>
<h1>Пример самого простого слайдера картинок (Simplest jQuery Slideshow)</h1>

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
</body>
</html>
Перейти в начало страницы
+Цитировать сообщение

Profesor08
сообщение 1.4.2012, 12:34
Сообщение #2


z-Z-z-Z-z
*******
Группа: Супермодератор
Сообщений: 3675
Регистрация: 15.6.2008
Пользователь №: 1181
Спасибо сказали: 1199 раз(а)



Репутация:   11  
HTML
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>nWeb Project</title>
<!-- latest jQuery -->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<!-- latest jQuery UI -->
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function() {
$(".slider img").hide();
slide(0);
});

function slide(i) {
if (i == $(".slider img").size())
i=0;
$(".slider img:eq("+i+")").fadeIn().delay(1000).fadeOut(function() {
i++;
slide(i);
});
}
</script>


<style type="text/css">
.slider img, .slider {
width: 122px;
height: 165px;
}
</style>

</head>
<body>
<div class="slider">
<img src="img/img_0.png">
<img src="img/img_1.png">
<img src="img/img_2.png">
</div>

</body>
</html>


Сообщение отредактировал Profesor08 - 1.4.2012, 12:34
Перейти в начало страницы
+Цитировать сообщение

Ответить в данную темуНачать новую тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


 

RSS Текстовая версия Сейчас: 30.6.2022, 14:25
Яндекс.Метрика  Перевод с помощью Google English French German Italian Portuguese Russian Spanish