$(function() { //配置变量 var config = { shownum : 11, //设置滚动的显示个数 autoscroll : true, //是否自动滚动,默认为 false autoscrollinterval : 3000 //自动滚动间隔,默认为 3000 毫秒,autoscroll = true 时才有效 } var scrollulwidth = $('.wrapper ul li').outerwidth(true), //单个 li 的宽度 scrollulleft = 0, //.scroll_ul 初使化时的 left 值为 0 prevallow = true, //为了防止连续点击上一页按钮 nextallow = true; //为了防止连续点击下一页按钮 //计算父容量限宽 $('.wrapper').width(config.shownum * scrollulwidth); //点击上一页 $('#prev').mouseover(function() { if (prevallow) { prevallow = false; scrollulleft = scrollulleft - scrollulwidth; $('.wrapper ul').css('left', scrollulleft); //复制最后一个 li 并插入到 ul 的最前面 $('.wrapper ul li:last').clone().prependto('.wrapper ul'); //删除最后一个 li $('.wrapper ul li:last').remove(); $('.wrapper ul').animate({ left : scrollulleft + scrollulwidth }, 1500, function() { scrollulleft = parseint($('.wrapper ul').css('left'), 10); prevallow = true; }) } }); //点击下一页 $('#next').mouseover(function() { if (nextallow) { nextallow = false; $('.wrapper ul').animate({ left : scrollulleft - scrollulwidth }, 1500, function() { scrollulleft = parseint($('.wrapper ul').css('left'), 10); scrollulleft = scrollulleft + scrollulwidth; $('.wrapper ul').css('left', scrollulleft); //复制第一个 li 并插入到 ul 的最后面 $('.wrapper ul li:first').clone().appendto('.wrapper ul'); //删除第一个 li $('.wrapper ul li:first').remove(); nextallow = true; }) } }); //自动滚动 if (config.autoscroll) { setinterval(function() { $('#next').trigger('mouseover'); }, config.autoscrollinterval) } })