var curindex = 0, imglen = $(".imglist li").length; var autochange = setinterval(function(){ if(curindex < imglen-1){ curindex ++; }else{ curindex = 0; } changeto(curindex); },5000); $("#prev").hover(function(){ clearinterval(autochange); },function(){ autochangeagain(); }); $("#prev").click(function(){ curindex = (curindex > 0) ? (--curindex) : (imglen - 1); changeto(curindex); }); $("#next").hover(function(){ clearinterval(autochange); },function(){ autochangeagain(); }); $("#next").click(function(){ curindex = (curindex < imglen - 1) ? (++curindex) : 0; changeto(curindex); }); $(".indexlist").find("li").each(function(item){ $(this).hover(function(){ clearinterval(autochange); changeto(item); curindex = item; },function(){ autochangeagain(); }); }); function autochangeagain(){ autochange = setinterval(function(){ if(curindex < imglen-1){ curindex ++; }else{ curindex = 0; } changeto(curindex); },5000); } function changeto(num){ var goleft = num * 435; $(".imglist").animate({left: "-" + goleft + "px"},1); $(".infolist").find("li").removeclass("infoon").eq(num).addclass("infoon"); $(".indexlist").find("li").removeclass("indexon").eq(num).addclass("indexon"); }