Простой слайдер картинок с использованием jQuery: примеры и код

Everybody · 2012 Апр. 01, 04:29

Интервалом 3000мс сменяются указанные картинки
Simplest jQuery Slideshow

Пример самого простого слайдера картинок (Simplest jQuery Slideshow)

<!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="https://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="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
</body>
</html>

Profesor08 · 2012 Апр. 01, 12:34

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>nWeb Project</title>

<script src="scripts/jquery.min.js" type="text/javascript"></script>

<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>

x-MU.net форум

Простой слайдер картинок с использованием jQuery: примеры и код

Everybody

Пример самого простого слайдера картинок (Simplest jQuery Slideshow)

Profesor08

Похожие темы (3)