注：js代码中，每个变量均已给了注释。为了防止快速多次点击，而出现动画不停的现象，这里在每次切换图片的时候先调用stop(false,true)。但是注意在向左侧滚动的时候，滚动到最后一张图图片后，再次切换时就不要用stop(false,true)，而是要瞬间定位到第一张图片（其实是dom结构中的第二张）的位置，同样，向右侧滚动时，当滚动到第一张图片后，再次切换时就不用stop(false,true)，而是要瞬间定位到最后一张图片（其实是dom结构中的倒数第二张）的位置。
var interval = 3000; //轮播间隔时间 var arrowL = $('#arrow_l'); //左侧箭头 var arrowR = $('#arrow_r'); //右侧箭头 var slideBox = $('#slide'); //轮播图区域 var innerBox = $('#inner'); //内层大盒子 var img = innerBox.children('li'); //每个图片 var dot = $('#dot'); //小圆点盒子 var imgW = $(img[0]).outerWidth(); //每个li标签的宽度 var imgCount = 5; //总图片个数（不同图片的个数）（实际dom上是有7张） var i = 0; //初始化为第0张图片 timer = null; //定时器 //自动轮播 timer = setInterval(function () { i++; innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300) dot.find('li').removeClass('active').eq(i-1).addClass('active') if(i > imgCount){ innerBox.animate({'left':-1*imgW+'px'},0); dot.find('li').removeClass('active').eq(0).addClass('active') i = 1; } },interval) //点击右侧箭头，播放下一张 arrowR.click(function () { i++; innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300) dot.find('li').removeClass('active').eq(i-1).addClass('active') if(i > imgCount){ innerBox.animate({'left':-1*imgW+'px'},0); dot.find('li').removeClass('active').eq(0).addClass('active') i = 1; } }) //点击左侧箭头，播放上一张 arrowL.click(function () { i--; innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300) dot.find('li').removeClass('active').eq(i-1).addClass('active') if(i < 1){ innerBox.animate({'left':-imgCount*imgW+'px'},0); dot.find('li').removeClass('active').eq(imgCount-1).addClass('active') i = imgCount; } }) //鼠标经过轮播图区域时，清除定时器，停止自动轮播 slideBox.mouseenter(function () { clearInterval(timer); }) //鼠标离开轮播图区域时，重新启动自动轮播 slideBox.mouseleave(function () { timer = setInterval(function () { i++; innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300) dot.find('li').removeClass('active').eq(i-1).addClass('active') if(i > imgCount){ innerBox.animate({'left':-1*imgW+'px'},0); dot.find('li').removeClass('active').eq(0).addClass('active') i = 1; } },interval) })
四、效果图展示
您可能感兴趣的文章: