Показать сообщение отдельно
  #1 (permalink)  
Старый 16.01.2015, 12:40
Интересующийся
Отправить личное сообщение для blackcky Посмотреть профиль Найти все сообщения от blackcky
 
Регистрация: 24.10.2014
Сообщений: 25

как добавить в js слайдер авто прокрутку
Здравствуйте, у меня все никак не получается внедрить в свой слайдер авто прокрутку, пролопатив n-ое количество материала с готовыми авто слайдерами и проанализировав код я так и не пришел к выводу, прошу вашей помощи
<img src="images/strela1.png" id="strela1">
	<img src="images/strela2.png" id="strela2">
	<a href="#">
		<div id="big-strela1"></div>
	</a>
	<a href="#">
		<div id="big-strela2"></div>
	</a>	
<div id="slider">
			<div id="slider-uvel">
				<div class="show-slaider">
					<a href="#"><img src="images/slider-1.jpg"></a>
				</div>
				<div class="show-slaider">
					<a href="#"><img src="images/slider-2.jpg"></a>
				</div>
				<div class="show-slaider">
					<a href="#"><img src="images/slider-3.jpg"></a>
				</div>
			</div>
		</div>


#slider {
	width: 973px;
	height: 383px;
	float: left;
	overflow: hidden;
	position: relative;
}
#slider-uvel {
	width: 2919px;
	position: relative;
	z-index: 54;
}
#big-strela1 {
	height: 143px;
	width: 96px;
	z-index: 80;
	position: absolute;
	margin-top: 223px;
	margin-left: 188px;
}
a:hover #big-strela1 {
	background: url("images/big-strela1.png");
	z-index: 80;
}
#big-strela2 {
	height: 143px;
	width: 96px;
	z-index: 80;
	position: absolute;
	margin-top: 223px;
	margin-left: 1066px;
}
a:hover #big-strela2 {
	background: url("images/big-strela2.png");
	z-index: 80;
}
#strela1 {
	position: absolute;
	margin-left: 206px;
	margin-top: 270px;
	z-index: 70;
}	
#strela2 {
	position: absolute;
	margin-top: 270px;
	margin-left: 1120px;
	z-index: 70;
}


$(document).ready(function(){

	$("#big-strela2").click(function(){
		$("#slider-uvel").animate({right: "-973px"}, 200);
		setTimeout(function () {
			$("#slider-uvel .show-slaider").eq(0).clone().appendTo("#slider-uvel");
			$("#slider-uvel .show-slaider").eq(0).remove();
			$("#slider-uvel").css({"left":"0px"});
		}, 10);
	});
	
	$("#big-strela1").click(function(){ 
		$("#slider-uvel .show-slaider").eq(-1).clone().prependTo("#slider-uvel");
		$("#slider-uvel").css({"right":"-973px"});
		$("#slider-uvel").animate({left: "0px"}, 200);
		$("#slider-uvel .show-slaider").eq(-1).remove();
	});
	
});
Ответить с цитированием