Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Авто-перелистывание слайдера (https://javascript.ru/forum/jquery/51051-avto-perelistyvanie-slajjdera.html)

chelovek-pauk 22.10.2014 15:02

Авто-перелистывание слайдера
 
Здравствуйте, уважаемые! Есть код слайдера flipster. Не могу разобраться как сделать, чтобы картинки автоматически менялись, допустим каждые 2 секунды.

egoistik 22.10.2014 15:10

вот кусочек с темы на этом форуме, там есть авто прокрутка посмотри может поможет


2	<script src="http://code.jquery.com/jquery-latest.js"></script>
073	<script type="text/javascript">
074	$(document).ready(function(){
075	 
076	   var slideWIDTH = 490;
077	   var SLlength = $(".slide").length;
078	   $('#slideWrp').width(490*SLlength)
079	   var ReSlide = (SLlength - (1-SLlength%2)); //Тест на четность
080	 
081	 
082	 
083	function MarginSet(){
084	   var margLeft = parseInt(($("#Wrap").width()-ReSlide*(1+$(".slide:first").width()))/2)+'px';
085	   $("#slideWrp").css({'margin-left':margLeft})
086	}
087	 
088	  MarginSet();
089	$(window).resize(function(){
090	  MarginSet();
091	});
092	 
093	//===========================//
094	 
095	   var a=$('#slideWrp');
096	   var b=a.width;
097	   a.css({'width':b})
098	   $(".slide").each(function(i){
099	     $(this).attr('id','Slide-'+i);
100	     $("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
101	   });$("#indexActive #active_Ind_0").addClass('active');
102	 
103	 
104	var  starT=true;
105	function ReplacSL(N){//alert(N)
106	         var slide=$(".slide:first");
107	         var W = parseInt(slide.width());
108	         var time = parseInt(410/Math.sqrt((N+1)))
109	         var marginLft = slide.css('margin-left');
110	         slide.animate({'margin-left':'-'+W+'px'},time,"linear",
111	         function(){
112	            slide.appendTo('#slideWrp');slide.css({'margin-left':marginLft});
113	            N--;if(N){ReplacSL(N);} else {starT=true;}
114	         });
115	 
116	}
117	 
118	function slideReplac(a,b){
119	     if(!starT) return;
120	     starT=false;
121	     if(a!=b){var N=b-a;
122	     if(+a>+b)N=b+SLlength-a;
123	        ReplacSL(N);
124	     }
125	}
126	var s =  SLlength - parseInt(ReSlide/2)
127	for(var i=0; i<s; i++){
128	$(".slide:first").appendTo('#slideWrp')
129	}
130	 
131	   $("#indexActive > span[id^='active_Ind']").click(function(){
132	     UserNoActSlide=false;
133	     var startI = +$("#indexActive > span.active").attr('id').replace('active_Ind_','');
134	     $("#indexActive > span.active").removeClass('active');
135	     $(this).addClass('active');
136	     var nextI = +$(this).attr('id').replace('active_Ind_','');
137	     slideReplac(startI,nextI)
138	 
139	   });
140	 
141	// АВТОПРОКРУТКА
142	   var intervalAutoId;
143	   var UserNoActSlide=true;
144	   $("#Wrap").bind('mouseenter mousemove',function(){ //Cброс автозапуска по наведению
145	      UserNoActSlide=false;//alert("A")
146	      clearInterval(intervalAutoId);
147	      UserNoActSlide=false;
148	    }).mouseleave(function(){                     //Разрешаем автозапуск по сходу курсора
149	      clearInterval(intervalAutoId);
150	      UserNoActSlide=true;
151	    });
152	 
153	 
154	     setInterval(function(){                  //Периодический тест активности и автозапуск
155	       if(UserNoActSlide){
156	         clearInterval(intervalAutoId);
157	         intervalAutoId=setInterval(function(){
158	             UserNoActSlide=false;
159	             var id= $("span[id^='active_Ind_'].active").attr('id');
160	             id = (+(id.replace('active_Ind_',''))+SLlength- 1)% SLlength;
161	             $('#active_Ind_'+ id).click();
162	             },4000); // Интервал автопрокрутки
163	        }
164	        
165	     },10000);        // Интервал Теста;
166	 
167	 
168	});
169	</script>

chelovek-pauk 22.10.2014 16:12

$('#flipster').flipster();
setInterval( function() {
$('#flipster').flipster('jump', 'left');
} , 10000);

Но чего-то не работает

chelovek-pauk 22.10.2014 16:20

Работает! Вот код:
setInterval(function(){$('.flipster').flipster('ju mp', 'left');} , 2000);

egoistik 22.10.2014 16:43

Вот и отлично :)


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