新闻上下滚动效果，一次滚一个
jq写的，封装了，方便以后直接调用。我这里直接用图片代替的新闻。
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/layout.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <title>上下滚动</title> </head> <body> <div id="container"> <!--上下滚动--> <div class="scroll"> <div class="scrollImg"> <ul> <li><a href="javascript:;"><img src="images/banner1.jpg" /></a></li> <li><a href="javascript:;"><img src="images/banner2.jpg" /></a></li> <li><a href="javascript:;"><img src="images/banner3.jpg" /></a></li> </ul> </div> <div class="scrollBtn"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <a class="leftBtn" href="javascript:;"></a> <a class="rightBtn" href="javascript:;"></a> </div><!--上下滚动 - end--> </div> </body> </html>
css部分：
@charset "utf-8"; *{margin:0;padding:0;font-size:12px;font-family:"宋体";} ul{list-style:none;} img{border:none;} a{text-decoration:none;} #container{width:980px;margin:50px auto;} /*上下滚动*/ .scroll{width:980px;height:470px;position:relative;} .scrollImg{width:980px;height:470px;overflow:hidden;} .scrollImg ul{width:100%;height:99999px;} .scrollImg ul li{width:100%;float:left;} .scrollImg ul li img{width:980px;height:470px;float:left;} .scrollBtn{position:absolute;bottom:10px;right:10px;} .scrollBtn ul li{ float:left;width:20px;height:20px;display:block;cursor:pointer;margin-left:5px; line-height:20px;text-align:center;background:#9F0;color:#000; } .scrollBtn ul li.selected{background:#C6C;color:#FFF;} .scroll a.leftBtn{ width:50px;height:50px;display:block;position:absolute;top:210px;left:0; background:url(../Images/leftBtn.png) no-repeat;cursor:pointer; } .scroll a.rightBtn{ width:50px;height:50px;display:block;position:absolute;top:210px;right:0; background:url(../Images/rightBtn.png) no-repeat;cursor:pointer; }
JS部分：
function scrolly(option){ var area = (typeof option.area=="undefined")?jQuery(""):option.area; //鼠标经过停止自动播放的区域 var box = (typeof option.box=="undefined")?jQuery(""):option.box; //包含滚动项目的容器 var btn = (typeof option.btn=="undefined")?jQuery(""):option.btn; //包含焦点按钮的容器 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 allow = true; //防止连续点击左右按钮 var listNum = box.find("li").length; //容器项目总数 var listHei = box.find("li:first").outerHeight(true); //每个项目高度 btn.find("li:first").addClass("selected"); //初始化 if(listNum < showNum){ allow = false; return false; }else{ var tempNum=0; for(var z=1;z<=showNum;z++){ box.find("li").eq(listNum+tempNum-z).clone(true).prependTo(box.find("ul")); tempNum = tempNum+1; } for(var c=0;c<showNum;c++){ box.find("li").eq(showNum+c).clone(true).appendTo(box.find("ul")); } box.find("ul").css("margin-top",-listHei*showNum+"px"); } //鼠标经过焦点按钮时 btn.find("li").hover(function(){ allow = false; var i = jQuery(this).index(); btn.find("li").removeClass("selected"); btn.find("li").eq(i).addClass("selected"); box.find("ul").stop().animate({marginTop:-(i+showNum)*listHei+"px"},animateTime,easing,function(){ allow = true; }); }); //点击左按钮时 leftBtn.click(function(){ if(allow){ allow = false; var m = Math.abs(parseInt(box.find("ul").css("margin-top")))/listHei; if(m==showNum){var e=listNum+showNum;}else{var e = m;} btn.find("li").removeClass("selected"); btn.find("li").eq(e-showNum-1).addClass("selected"); box.find("ul").stop().animate({marginTop:-(m-1)*listHei+"px"},animateTime,easing,function(){ var mar = parseInt(box.find("ul").css("margin-top")); if(mar >= 0){box.find("ul").css("margin-top",-listNum*listHei+"px");} allow = true; }); } }); //点击右按钮时 rightBtn.click(function(){ if(allow){ allow = false; var n = Math.abs(parseInt(box.find("ul").css("margin-top")))/listHei; if(n==listNum+showNum-1){var k=0;}else{var k = n-showNum+1;} btn.find("li").removeClass("selected"); btn.find("li").eq(k).addClass("selected"); box.find("ul").stop().animate({marginTop:-(n+1)*listHei+"px"},animateTime,easing,function(){ var mar = parseInt(box.find("ul").css("margin-top")); if(mar <= -(listNum+showNum)*listHei){box.find("ul").css("margin-top",-showNum*listHei+"px");} allow = true; }); } }); //自动播放 function autoRun(){ if(allow){ allow = false; var r = Math.abs(parseInt(box.find("ul").css("margin-top")))/listHei; if(r==listNum+showNum-1){var t=0;}else{var t = r-showNum+1;} btn.find("li").removeClass("selected"); btn.find("li").eq(t).addClass("selected"); box.find("ul").stop().animate({marginTop:-(r+1)*listHei+"px"},animateTime,easing,function(){ var mar = parseInt(box.find("ul").css("margin-top")); if(mar <= -(listNum+showNum)*listHei){box.find("ul").css("margin-top",-showNum*listHei+"px");} allow = true; }); } } if(autoPlay){ var intID = setInterval(autoRun,waitTime); //鼠标滑入停止动画，滑出播放动画 area.hover(function(){ clearInterval(intID); },function(){ intID = setInterval(autoRun,waitTime); }); } } /*-------------------------------------------------------------------------------------------------------------------------------*/ //滚动 $(function(){ scrolly({ area : $(".scroll"), //鼠标经过停止自动播放的区域 box : $(".scrollImg"), //包含滚动项目的容器 btn : $(".scrollBtn"), //包含焦点按钮的容器 leftBtn : $(".scroll a.leftBtn"), //左按钮 rightBtn : $(".scroll a.rightBtn"), //右按钮 showNum : 1, //容器显示的图片个数 waitTime : 8000, //滚动间隔时间 animateTime : "slow", //滚动持续时间 easing : "swing", //滚动效果 autoPlay : true //是否自动播放 }); });
