function picRoll_2(config){ var defaultConfig = { eleFather: null, //容器标签 父元素 最外围标签 imgWidth:0, showImgNum:0, rollLeft: null, //向左转标签 rollRight: null, //向右转标签 time:3000 //图片切换时间间隔,默认3000毫秒 } config = $.extend({},defaultConfig,config); var pointer = 0; var $imgUl = $(config.eleFather).children('ul');//检索获取图片ul列表 var imgWidth = config.imgWidth; var imgNum = $imgUl.children('li').length; var arrInter = []; //根据图片数量自匹配imgUl的宽 var startLeft = -imgWidth*imgNum; $imgUl.width(imgWidth*imgNum*2).append($imgUl.html()).css('left',startLeft); //定时器 arrInter.push(setInterval(function(){_move('-')},config.time)); $(config.eleFather).mouseover(function(){ _clearInter(arrInter); }).mouseout(function(){ arrInter.push(setInterval(function(){_move('-')},config.time)); }) //左右点击按钮的hover透明度效果 var opa = $(config.rollLeft).css('opacity'); $(config.rollLeft+","+config.rollRight).hover(function(){ $(this).css('opacity',1); _clearInter(arrInter); },function(){ $(this).css('opacity',opa); arrInter.push(setInterval(function(){_move('-')},config.time)); }) //向左,向右滚动点击效果 $(config.rollLeft).click(function(){ _move('+'); }) $(config.rollRight).click(function(){ _move('-'); }) //底部缩略图点击效果 function _move(style){ $imgUl.stop(true,true) var imgUlLeft = parseInt($imgUl.css('left')); console.log(startLeft+config.showImgNum*imgWidth) if(imgUlLeft<=startLeft-(imgNum-config.showImgNum)*imgWidth){ $imgUl.css('left',startLeft+config.showImgNum*imgWidth+'px'); } if(imgUlLeft>=0){ $imgUl.css('left',startLeft); } $imgUl.animate({left: style+'='+imgWidth+'px'},'slow'); } function _clearInter(arrInter){ for (var i = arrInter.length - 1; i >= 0; i--) { clearInterval(arrInter[i]); } } }