Поменять три изображения местами с анимацией
Здравствуйте!
В JS еле-еле что-то соображаю, прошу помочь. Есть три изображения
<div id="main-slider">
<img src="img/big-slide.jpg" class="big-slide" />
<div id="left-slides">
<img src="img/small-slide1.jpg" alt="" class="small-slides1"/>
<img src="img/small-slide2.jpg" alt="" class="small-slides2"/>
</div>
</div>
Необходимо менять их местами (каждое предыдущее становится на место перед ним, и так по кругу) через определенный промежуток времени с эффектом анимации. Использую jQuery для обращения к элементам и изменения их свойств. Мои попытки превращаются в огромный быдлокод, который даже страшно показывать. |
Простейший слайдер на jquery
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.Block {
width: 400px; height:200px; float: left;
}
#Blocks {
width: 1200px; height:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
function go() {
$('#Blocks').delay(3000).animate({
left: '-=400'
}, 2000, function () {
$('.Block:first').appendTo($(this))
$(this).css({
left: '0px'
});
go()
})
}
go()
})
</script>
</head>
<body>
<div style="overflow:hidden; width: 400px; height:200px; position: relative ">
<div id="Blocks" style="position:absolute; top: 0px; left:0px;" >
<div class ="Block" id = "1" style="background-color:red;">1</div>
<div class ="Block" id = "2" style="background-color:green;">2</div>
<div class ="Block" id = "3" style="background-color:Yellow;">3</div>
</div>
</div>
</body>
</html>
|
Это немного не то. Нужно, чтобы все три изображения отображались на странице, одновременно. И одновременно меняли свои места.
|
zahod5277,
помедитируйте тут |
| Часовой пояс GMT +3, время: 16:40. |