• 06-11-2012, 14:57:24
    #1
    Arkadaşlar merhaba, ben jquery ile bir slider yaptım numaralı, numaraların üstüne gelince numaraya göre o slide'ı açıyor sıkıntı yok; fakat birde setInterval ekleyince slider'ın içine sorun başlıyor, örneğin ben mouse ile numaraların üstünde gezinince sırasıyla hepsi değişiyor resimler, setInterval de o sırada çalıştığı için sıkıntı oluyordu. Bende numaraların bulunduğu divin üstüne gelince clearInterval yapıyorum üstünden çekilince setInterval yapıyorum ama nafile, hatta "cycle" var onu mu kullansam diyorum ama 57kb :S sözü uzatmadan kodu aşağıda paylaşayım, umarım bir çözüm öneriniz vardır.

    Kodu ilk önce parça parça verip açıklamak istiyorum en son tam kodu vermek istiyorum:

    İlk işlem ilk resmi görünür yapıyor zaten, ikincisi ise numaratördeki 1 sayısına selected class'nını atıyor; çünkü selected olan numara işaretli oluyor koduma göre.
    $('#sliders #manset #imgBox img:first').css('display','block');
    $('#sliders #manset #numbers ul li.num:first').addClass('selected');
    burada setinterval ve setinterval ile çağıracağım fonksiyonu tanımlıyorum:
    var autoManset = function(){
    			clearInterval(setIntervalManset);
    			
    			var totalManset = $('#sliders #manset #imgBox a').size() - 1;
    			var visibleManset = $('#sliders #manset #imgBox img:visible').parent().index();
    			var nextManset = visibleManset+1;
    			if(totalManset  == visibleManset) { nextManset = 0; }
    			
    			$('#sliders #manset #imgBox img:visible').css('display','none');
    			$('#sliders #manset #imgBox a').eq(nextManset).children('img').css('display','block');
    			$('#sliders #manset #numbers ul li.selected').removeClass('selected');
    			$('#sliders #manset #numbers ul li').eq(nextManset).addClass('selected');
    			
    			setInterval(autoManset,4000);
    		}
    		
    		var setIntervalManset = setInterval(autoManset,4000);
    		
    		$('#sliders #manset').hover(function () {
    			clearInterval(setIntervalManset);
    		}, function () {
    			setInterval(autoManset,4000);
    		});
    burada da numaratörlerin üstüne gelince resimlerin değişmesini sağlıyorum ve numaratör divinin üstüne gelince clearinterval çekilince setintervali tanımlıyorum
    var selectedLiIndex;
    		
    		$('#sliders #manset #numbers ul li.num').mouseover(function(){
    			selectedLiIndex=$(this).index();
    			$('#sliders #manset #numbers ul li.selected').removeClass('selected');
    			$(this).addClass('selected');
    			$('#sliders #manset #imgBox img:visible').css('display','none');
    			$('#sliders #manset #imgBox img').eq(selectedLiIndex).css('display','block');
    		});
    		
    		$('#sliders #manset #numbers').on('mouseenter',function(){
    			clearInterval(setIntervalManset);
    		});
    		$('#sliders #manset #numbers').on('mouseleave',function(){
    			setInterval(autoManset,4000);
    		});

    Tam kod:
    $(function(){
    	$('#sliders #manset #imgBox img:first').css('display','block');
    	$('#sliders #manset #numbers ul li.num:first').addClass('selected');
    	$(window).load(function(){
    		
    		var autoManset = function(){
    			clearInterval(setIntervalManset);
    			
    			var totalManset = $('#sliders #manset #imgBox a').size() - 1;
    			var visibleManset = $('#sliders #manset #imgBox img:visible').parent().index();
    			var nextManset = visibleManset+1;
    			if(totalManset  == visibleManset) { nextManset = 0; }
    			
    			$('#sliders #manset #imgBox img:visible').css('display','none');
    			$('#sliders #manset #imgBox a').eq(nextManset).children('img').css('display','block');
    			$('#sliders #manset #numbers ul li.selected').removeClass('selected');
    			$('#sliders #manset #numbers ul li').eq(nextManset).addClass('selected');
    			
    			setInterval(autoManset,4000);
    		}
    		
    		var setIntervalManset = setInterval(autoManset,4000);
    		
    		$('#sliders #manset').hover(function () {
    			clearInterval(setIntervalManset);
    		}, function () {
    			setInterval(autoManset,4000);
    		});
    		
    		
    		var selectedLiIndex;
    		
    		$('#sliders #manset #numbers ul li.num').mouseover(function(){
    			selectedLiIndex=$(this).index();
    			$('#sliders #manset #numbers ul li.selected').removeClass('selected');
    			$(this).addClass('selected');
    			$('#sliders #manset #imgBox img:visible').css('display','none');
    			$('#sliders #manset #imgBox img').eq(selectedLiIndex).css('display','block');
    		});
    		
    		$('#sliders #manset #numbers').on('mouseenter',function(){
    			clearInterval(setIntervalManset);
    		});
    		$('#sliders #manset #numbers').on('mouseleave',function(){
    			setInterval(autoManset,4000);
    		});
    	});
    	
    	
    });
    Edit: arkadaşlar bilen yokmu, bari istediğim şekilde düzgün çalışan bir script önerin.

    Edit2: arkadaşlar konu güncel hiçmi kimse bilmiyor :s
  • 26-11-2012, 08:59:59
    #2
    window.clearInterval olarak denediniz mi
  • 26-11-2012, 09:32:12
    #3
    Hayır denemedim; fakat bu seferde sayfanın başka bir yerindede kullanılıyor ise setInterval onlarda iptal olmazmı ? dediğinizi deneyeceğim.