新闻上下滚动效果，一次滚一个
2013-09-24 14:36
274 查看
jq写的，封装了，方便以后直接调用。我这里直接用图片代替的新闻。
html部分：
css部分：
JS部分：
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 //是否自动播放
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 新闻列表上下循环滚动效果
- 滚动新闻效果（使一个div滚动）
- Android 上下滚动的新闻效果
- 【安卓-自定义布局】安卓App开发思路 一步一个脚印（九）实现自定义滚动的新闻条目上下滚动-仿蘑菇街
- 图片上下滚动效果
- 从下往上的新闻滚动效果
- 图片上下滚动效果
- Android:TextView的垂直滚动效果,和上下滚动效果
- 使用JS写一个文字滚动效果
- JavaScript 无缝上下滚动加定高停顿效果
- JavaScript 无缝上下(左右)滚动加定高(定宽)停顿效果
- 一个有上下滚动动画的TextView
- 当页面类似于表单，有很多需要输入的内容，就需要做上下滚动的效果
- js实现滚动新闻效果
- 前端js实现新闻列表数据动态滚动效果的函数
- TextView上下滚动实现通知效果
- JQuery实现资讯上下滚动悬停效果
- android平台的图文上下滚动与左右滚动效果
- javaScript滚动新闻之上下左右平滑滚动
- JQuery页面图片切换和新闻列表滚动效果的具体实现