Посмотрите пожалуйста код и укажите на ошибки, может где то что то не грамотно, медленно, не рационально и так далее. Ниже во вложении демо слайдера.
Скрин
js код:
function mini_gallery (img,img_scroll) {
if (img_scroll) {
var img_width = $('#gallery ul li').width();
gallery_width_visible = img_width * img ,
gallery_width = img_width * $("#gallery img").size();
$('#gallery').css('width',""+gallery_width_visible+"px");
$("#right , #left").click(function() {
var margin = parseFloat($('#gallery ul').css('margin-left') , 10);
if ( this.id == 'right') { var left_margin = margin - gallery_width_visible }
else { var left_margin = margin + gallery_width_visible};
$('#gallery ul').stop().animate({marginLeft: left_margin }, 2000)
if ( left_margin < 0 ) { $('#left').css('visibility','visible') }
else { $('#left').css('visibility','hidden') }
if ( left_margin - gallery_width_visible < - gallery_width + 20 ) { $('#right').css('visibility','hidden') }
else { $('#right').css('visibility','visible') }
}
);
}
$("#gallery img").mouseover(function() {
var target = $(this).clone(),
pos = $(this).offset(),
cssObj = {
'position' : 'absolute',
'z-index' : '10',
'left' : ""+pos.left+"px",
'top' : ""+pos.top+"px"
}
target.css(cssObj).appendTo('body');
$(target).stop().animate({width:160, height:160 , left: pos.left - 40 , top: pos.top - 40 }, 200)
$(target).mouseout(function() {
$(this).stop().animate({width:80 , height:80 , left: pos.left , top: pos.top }, 10 ,
function() {
$(this).remove()
}
);
}
);
}
);
}
mini_gallery (4,true);