jQuery простой анимированный слайдер

Victory · January 15, 2012

Начнем с того что в скриптинге я немного понимаю так что не судите строго.

В чем суть:

Есть слайдер типа (написан естественно мною):


$("#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>

Sign In

jQuery простой анимированный слайдер

Question

Victory

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information