Есть задача сделать красивую карусельку в форме буквы Е. Без БД работает славно, но когда подключаем вывод из БД, становится сложнее. Вот тут эта каруселька без базы данных -
http://s-f.kiev.ua/.
Вот модифицированный код кнопки, заставляющей ее двигаться вправо
function moveRight () {
for ( var i = 1; i <= elementsAll; i ++ ) {
if (i < elementsIn) {
var nextDiv = "rotate" + (i + 1);
var nextTop = $("#" + nextDiv).css("top");
var nextLeft = $("#" + nextDiv).css("left");
// 1 -> 2, 2 -> 3, ..., 13 -> 14
$("#rotate" + i).animate({top:nextTop, left:nextLeft}, rotateSpeed, 'linear', function() {
$("#rotate" + i).attr("id", nextDiv);
});
//alert (nextDiv)
} else if (i == elementsIn) {
var nextDiv = "rotate" + (i + 1);
// 14 -> 15 & disapeared
$("#rotate" + i).animate({left:"+=100", opacity:0}, rotateSpeed, 'linear', function() {
$("#rotate" + i).attr("id", nextDiv).css("display", "none")
.css("top", "0").css("left", "0");
});
} else if (i > elementsIn && i < elementsAll) {
// 15 -> 16, ..., 19 -> 20
$("#rotate" + i).attr("id", "rotate" + (i + 1));
} else if (i == elementsAll) {
// 20 -> on position between 1
$("#rotate" + i).css("display", "block").css("top", "420").css("left", "-30");
var nextTop = $("#rotate1").css("top");
var nextLeft = $("#rotate1").css("left");
// 20 -> 1 & slide
$("#rotate" + i).css("top", nextTop)
.animate({left:nextLeft, opacity:1}, rotateSpeed, 'linear', function() {
$("#rotate" + i).attr("id", "rotate1");
});
}
}
}
Если коротко, то есть 14 видимых элементов и N невидимых. Видимые постепенно уходят в невидимые, и наоборот.
вот HTML:
<div id="move-e-left"><img src="http://localhost/www.epodpiska/images/interface/arrow-left.png" /></div>
<div id="rotate1"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate2"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate3"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate4"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate5"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate6"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate7"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate8"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate9"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate10"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate11"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate12"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate13"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate14"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate15"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate16"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate17"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate18"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate19"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="rotate20"><a href="#"><img src="http://localhost/www.epodpiska/images/product/times.jpg" /><br />times</a></div>
<div id="move-e-right"><img src="http://localhost/www.epodpiska/images/interface/arrow-right.png" /></div>
и CSS:
<style type="text/css">
#move-e-left, #move-e-right {position: absolute; z-index: 10; cursor: pointer;}
#rotate1, #rotate2, #rotate3, #rotate4, #rotate5, #rotate6, #rotate7, #rotate8,
#rotate9, #rotate10, #rotate11, #rotate12, #rotate13, #rotate14 {position: absolute; z-index: 10; display: block;}
#move-e-left {top: 450px; left: 30px}
#move-e-right {top: 690px; left: 560px}
#rotate1 {top: 420px; left: 170px}
#rotate2 {top: 420px; left: 270px;}
#rotate3 {top: 420px; left: 370px;}
#rotate4 {top: 250px; left: 470px;}
#rotate5 {top: 170px; left: 370px;}
#rotate6 {top: 110px; left: 270px;}
#rotate7 {top: 180px; left: 170px;}
#rotate8 {top: 230px; left: 60px;}
#rotate9 {top: 410px; left: 60px;}
#rotate10 {top: 550px; left: 60px;}
#rotate11 {top: 650px; left: 170px;}
#rotate12 {top: 710px; left: 270px;}
#rotate13 {top: 680px; left: 370px;}
#rotate14 {top: 650px; left: 470px;}
#rotate15 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
#rotate16 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
#rotate17 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
#rotate18 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
#rotate19 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
#rotate20 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
#rotate21 {
position: absolute;
top: 0; left: 0;
display: none;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
</style>
Заранее благодарен
