Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как добавить в js слайдер авто прокрутку (https://javascript.ru/forum/misc/52995-kak-dobavit-v-js-slajjder-avto-prokrutku.html)

blackcky 16.01.2015 12:40
как добавить в 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();
	});
	
});

nice_try 16.01.2015 12:48
сам слайдер работает? по setInterval жми на свою кнопку листания $("#big-strela2").click();
а вообще выдели листание в функцию и вызывай когда нужно.
лучше пример сделай на jsfiddle.net иди песочнице на этом сайте

blackcky 16.01.2015 13:15
да, слайдер работает. при нажатие на кнопки, он производит операции листания в стороны( зависит от кнопки). я не могу понять куда, как и какой код вставить, чтобы по мимо ручной прокрутки, происходила операция авто листания с временным периодом

Noobloid 16.01.2015 13:46
попробуй вынуть содержимое финкции oncklick в отдельную функцию и запускать её с setInterval
$("#big-strela2").click(myFunct());
$(document).ready(setInterval(myFunct(), 5000));

function myFunct(){
   $("#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);
}

сори setInterval а не setTimeout

blackcky 17.01.2015 19:23
Цитата:
Сообщение от Noobloid
попробуй вынуть содержимое финкции oncklick в отдельную функцию и запускать её с setInterval
01
$("#big-strela2").click(myFunct());
02
$(document).ready(setInterval(myFunct(), 5000));
03
 
04
function myFunct(){
05
   $("#slider-uvel").animate({right: "-973px"}, 200);
06
   setTimeout(function () {
07
      $("#slider-uvel .show-slaider").eq(0).clone().appendTo("#slider-uvel");
08
      $("#slider-uvel .show-slaider").eq(0).remove();
09
      $("#slider-uvel").css({"left":"0px"});
10
   }, 10);
11
}
я очень плохо разбираюсь в js, из вашего сообщения я сделал вывод что нужно прикрепить отдельно еще и этот код, если вас не затруднит, расскажите по подробней, что и как сделать. подключив ваш код, слайдер только пролистывает первую картинку( почти моментально) и больше действий нет

krisdh 20.01.2015 09:04
Всё просто.

Вот твой код:
$(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();
	});
	
});


Замени его на: 
$(document).ready(function(){	
	$("#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();
	});

	$("#big-strela2").click(myFunct());
	setInterval(myFunct(), 5000);

	function myFunct(){
	   $("#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-strela2, а в коде приведенном Noobloid`ом нажатие на #big-strela2 запускает функцию, которая параллельно запускается и через setInterval с тайм-аутом 5 секунд.

Так же я обычно вставляю в слайдеры такую функцию, что бы при наведении останавливалась прокрутка, но это уже баловства. Попробуй, для начала, разобраться с этим кодом.


Часовой пояс GMT +3, время: 19:22.