$(function(){ var nowIndex = 0; var imgList = $('.banner_list ul li'); var aBtn = $('.banner_but ul li'); imgList.hide().eq(nowIndex).fadeIn('slow'); aBtn.eq(nowIndex).addClass('banner_cur'); function hideShow(){ imgList.eq(nowIndex).fadeIn('slow').siblings().fadeOut('slow'); aBtn.eq(nowIndex).addClass('banner_cur').siblings().removeClass('banner_cur'); } function next(){ if(nowIndex > imgList.length -1) { nowIndex =0;} else if( nowIndex < 0){ nowIndex = imgList.length -1;} hideShow(); } function autoPlay(){ nowIndex++; next(); } var timer = setInterval(autoPlay,5000); aBtn.hover(function(){ clearInterval(timer); nowIndex = $(this).index(); hideShow(); timer = setInterval(autoPlay,8000); return false; }) })