// javascript document $(function() { var swidth = $("#lunbo").width(); //获取焦点图的宽度(显示面积) var len = $("#lunbo ul li").length; //获取焦点图个数 var index = 0; var pictimer; //为小按钮添加鼠标滑入事件,以显示相应的内容 $("#lunbo .lunbo-btn a").mouseenter(function() { index = $("#lunbo .lunbo-btn a").index(this); showpics(index); }).eq(0).trigger("mouseenter"); //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 $("#lunbo ul").css("width",swidth * (len)); //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 $("#lunbo").hover(function() { clearinterval(pictimer); },function() { pictimer = setinterval(function() { showpics(index); index++; if(index == len) {index = 0;} },4000); //此4000代表自动播放的间隔,单位:毫秒 }).trigger("mouseleave"); //显示图片函数,根据接收的index值显示相应的内容 function showpics(index) { //普通切换 var nowleft = -index*swidth; //根据index值计算ul元素的left值 $("#lunbo ul").stop(true,false).animate({"left":nowleft},300); //通过animate()调整ul元素滚动到计算出的position $("#lunbo .lunbo-btn a").removeclass("select").eq(index).addclass("select"); //为当前的按钮切换到选中的效果 } });