Начнем с того что в скриптинге я немного понимаю так что не судите строго. В чем суть: Есть слайдер типа (написан естественно мною): $("#slideshow, .load").everyTime(10, function(){ var widthimg=$("#slideshow .div").width(); $("#slideshow").delay(2000) .animate({left:-widthimg}, 1000).delay(2000) .animate({left:-widthimg*2}, 1000).delay(2000) .animate({left:-widthimg*3}, 1000).delay(2000) .animate({left:"0px"}, 1000); $(".load").animate({width:widthimg}, 1900) .animate({width:"0px"},0).delay(1100); }); Использует библиотеку "timer". Он 4 раза пролистывает к позиции 4 блока и возвращается к стартовому значению. Проблема в том что он не учитывает количество блоков самостоятельно. Есть слайдер второго типа: $("#slideshow, .load").everyTime(10, function(){ var widthimg=$("#slideshow .div").width(); $("#slideshow").delay(2000).animate({left:"-="+widthimg+"px"}, 1000); }); Который делает тот же эффект проворачивания но постоянно. Я что хочу сделать: когда этот слайдер прокручивает до определённой позиции, а точнее до последнего блока потом его автоматически возвращает назад к позиции (left:0px). Пытался это воплотить через position и if / else (если позиция равна позиции 4 блока, а точнее конца Div элемента "#slideshow" то анимация возвращает к позиции (left:0px).) но нечего не получилось так как не могу определить позицию элемента на этапе анимации. Посоветуйте что нибудь, где рыть как сделать чтобы работало или подскажыте что где переделать и как, итд. Структура слайдера должна остатся и ефект возвращения тоже. П.С. сам код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #window{clear:both; width:960px; height:360px;overflow:hidden; position:relative;} #slideshow{width:20000em; height:700px; overflow:hidden; position:relative;} #slideshow .div{width:960px; height:360px;float:left;background:#222222;color:#FFFFFF;} </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://www.irengba.com/codewell/js/jquery.timers-1.1.2.js"></script> <script> $(document).ready(function(){ var widthimg=$("#slideshow .div").width(); /* $("#slideshow, .load").everyTime(10, function(){ $("#slideshow").delay(2000) .animate({left:-widthimg}, 1000).delay(2000) .animate({left:-widthimg*2}, 1000).delay(2000) .animate({left:-widthimg*3}, 1000).delay(2000) .animate({left:"0px"}, 1000); $(".load").animate({width:widthimg}, 1900) .animate({width:"0px"},0).delay(1100); }); */ $("#slideshow, .load").everyTime(10, function(){ $("#slideshow").delay(2000).animate({left:"-="+widthimg+"px"}, 1000); $(".load").animate({width:widthimg}, 1900) .animate({width:"0px"},0).delay(1100); }); }); </script> </head> <body> <div id="window"> <div id="slideshow"> <div class="div">1</div> <div class="div">2</div> <div class="div">3</div> <div class="div">4</div> </div> </div> <div class="load" style="position: absolute;background:#FFFFFF;opacity:0.5;height:7px; margin-top:-25px;"></div> </body> </html>
