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ıyorumvar 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