Начнем с того что в скриптинге я немного понимаю так что не судите строго.
В чем суть:
Есть слайдер типа (написан естественно мною):
$("#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>
