$(function(){ var bWidth = $("#list_focus").width(); //获取banner宽度 var picNumber = $("#list_focus .img_list li").length; //获取图片张数 var index = 1; var picTimer; $("#list_focus .img_list").css("width",bWidth*picNumber); //设置图片列表的宽度 var btn = ""; $("#list_focus").append(btn); $("#list_focus .btn li").mouseenter(function() { //按钮事件 index = $("#list_focus .btn li").index(this); showPics(index); }).eq(0).addClass("active"); $("#list_focus").hover(function() { //鼠标划入停止,划出继续动画 clearInterval(picTimer); $("#list_focus .btn").animate({"bottom":8,"opacity":1},180); },function() { $("#list_focus .btn").animate({"bottom":-10,"opacity":0},180); picTimer = setInterval(function() { showPics(index); index++; if(index == picNumber) {index = 0;} },4000); }).trigger("mouseleave"); function showPics(index){ //图片滚动函数 var rollLeft = -index*bWidth; $("#list_focus .img_list").stop(true,false).animate({"left":rollLeft},300); $("#list_focus .btn li").removeClass("active").eq(index).addClass("active"); }; });