同上一篇“新闻滚动”的原理基本差不多，直接贴代码了：
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/slide.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <title>js</title> </head> <body> <div id="container"> <!--图片滚动--> <div class="slide"> <div class="slideBox"> <ul> <li><a href="javascript:void(0)"><img src="images/banner1.jpg" /></a></li> <li><a href="javascript:void(0)"><img src="images/banner2.jpg" /></a></li> <li><a href="javascript:void(0)"><img src="images/banner3.jpg" /></a></li> <li><a href="javascript:void(0)"><img src="images/banner4.jpg" /></a></li> </ul> </div> <a class="leftBtn" href="javascript:void(0)"></a> <a class="rightBtn" href="javascript:void(0)"></a> </div><!--图片滚动 - 结束--> </div> </body> </html>
css:
@charset "utf-8"; *{margin:0;padding:0;font-size:12px;font-family:Arial, Helvetica, sans-serif,"宋体";} ul,ol,li{list-style-type:none;} img{border:none;} table{border-collapse:collapse;border-spacing:0;} a{text-decoration:none;} #container{width:990px;margin:50px auto;} /*广告滚动*/ .slide{width:990px;position:relative;} .slideBox{width:990px;height:158px;overflow:hidden;} .slideBox ul{width:99999px;} .slideBox ul li{float:left;} .slideBox ul li a img{width:330px;height:158px;float:left;} .slide a.leftBtn{ width:50px;height:50px;display:block;position:absolute;top:54px;left:0; background:url(../Images/leftBtn.png) no-repeat; } .slide a.rightBtn{ width:50px;height:50px;display:block;position:absolute;top:54px;right:0; background:url(../Images/rightBtn.png) no-repeat; }
jq:
function scrollxn(option){ var area = (typeof option.area=="undefined")?jQuery(""):option.area; //鼠标经过停止自动播放的区域 var box = (typeof option.box=="undefined")?jQuery(""):option.box; //包含滚动项目的容器 var leftBtn = (typeof option.leftBtn=="undefined")?jQuery(""):option.leftBtn; //左按钮 var rightBtn = (typeof option.rightBtn=="undefined")?jQuery(""):option.rightBtn; //右按钮 var showNum = (typeof option.showNum=="undefined")?1:option.showNum; //容器(box)显示的图片个数 var waitTime = (typeof option.waitTime=="undefined")?8000:option.waitTime; //滚动间隔时间 var animateTime = (typeof option.animateTime=="undefined")?"slow":option.animateTime; //滚动持续时间 var easing = (typeof option.easing=="undefined")?"swing":option.easing; //滚动效果 var autoPlay = (typeof option.autoPlay=="undefined")?true:option.autoPlay; //是否自动播放 var listNum = box.find("li").length; //图片总数量 var listWid = box.find("li").first().outerWidth(true); //每个li的宽度（包括内外边距） var marLeft = -listNum * listWid; //ul初始距离 var allow = true; //防止连续点击左右按钮 //如果总图片数小于容器容纳的图片数，不滚动 if(listNum < showNum){ allow = false; }else{ var list1 = box.find("li").clone(true); var list2 = box.find("li").clone(true); list1.appendTo(box.find("ul")); list2.appendTo(box.find("ul")); box.find("ul").css("margin-left",marLeft + "px"); } //点击左键 - 向右滚动 leftBtn.click(function(){ if(allow){ allow = false; box.find("ul").animate({marginLeft:marLeft+showNum*listWid+"px"},animateTime,easing,function(){ for(var i=0;i<showNum;i++){ box.find("li").last().clone(true).prependTo(box.find("ul")); box.find("li").last().remove(); } box.find("ul").css("margin-left",marLeft + "px"); allow = true ; }); } }); //点击右键 - 向左滚动 rightBtn.click(function(){autoRun();}); function autoRun(){ if(allow){ allow = false; box.find("ul").animate({marginLeft:marLeft-showNum*listWid+"px"},animateTime,easing,function(){ for(var e=0;e<showNum;e++){ box.find("li").first().clone(true).appendTo(box.find("ul")); box.find("li").first().remove(); } box.find("ul").css("margin-left",marLeft + "px"); allow = true ; }); } } //自动播放 if(autoPlay){ var intID = setInterval(autoRun,waitTime); //鼠标滑入停止动画，滑出播放动画 area.hover(function(){ clearInterval(intID); },function(){ intID = setInterval(autoRun,waitTime); }); } } /*-------------------------------------------------------------------------------------------------------------------------------*/ //滚动 $(function(){ scrollxn({ area : $(".slide"), //鼠标经过停止自动播放的区域 box : $(".slideBox"), //包含滚动项目的容器 leftBtn : $(".slide a.leftBtn"), //左按钮 rightBtn : $(".slide a.rightBtn"), //右按钮 showNum : 3, //容器显示的图片个数 waitTime : 8000, //滚动间隔时间 animateTime : "slow", //滚动持续时间 easing : "swing", //滚动效果 autoPlay : true //是否自动播放 }); });