javascript简单的新闻滚动切换效果-Javascript-技术教程-asp编程网

javascript简单的新闻滚动切换效果
[code]
<!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>
<title> javascript简单的新闻滚动切换效果 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
#google{
border:1px solid #ccc;
width:468px;
overflow:hidden;
font-family:Arial;
font-size:12px;
}
img{border:none; }
#google ul{width:9999px}
#google ul,p{margin:0px; padding:0px;line-height:160%;}
#google p{margin:10px 0; }
#google li{list-style-type:none;float:left;margin:4px;display:inline;width:460px}
#google div a{color:#369;font-size:18px;font-family:Arial;text-decoration:none; }
#pageBar{
width:448px;
border:1px solid #ccc;
border-top:none;
padding:3px 10px;
background:#E9EEF1;
font-family:Georgia,sans-serif;
font-size:12px;
color:#999;
}
#pageBar div{float:right; }
#pageBar button{
border:1px solid #DCE0E1;
width:16px;
margin-left:5px;
height:16px;
background:#fff;
color:#697990;
font-weight:bold;
padding:0;
}
</style>
<script>
</script>
</head>
<body>
<div class="main16 t_bg1" id="google">
<ul>
<li>
<a href="" title=""><img src="http://www.aspprogram.cn/test/news1/1.jpg"></a>
<div><a href="###">for in Intrigue</a></div>
<p>One of JavaScript’s best features is the ability to augment the built-in types. If we want to add a new method to a type, we simply assign a function to the type’s prototype.[<a href="###">Details</a>]</p>
</li>
</ul>
</div>
<div id="pageBar">
<div><button onclick="Google.prev()" onmouseover="Google.stop()" onmouseout="Google.auto()"><</button><button onclick="Google.next()" onmouseover="Google.stop()" onmouseout="Google.auto()">></button></div><span id="page"></span>
</div>
<script language="javascript">
var imgPath='http://www.aspprogram.cn/test/news1/';
Google={
box:null,
index:0,
fx:function (el,to){
var getFx=function (a,b){
var c=Math[(a-b)>0?'floor':'ceil'];
return function (){return [a+=c((b-a)*0.15),a-b]};
};
var get=getFx(el.scrollLeft,to);
clearInterval(el.timer);
this.showPage();
el.timer=setInterval(function(){
var x=get();
el.scrollLeft=x[0];
if(x[1 ]==0)clearInterval(el.timer);
},10);
},
addElements:function (data){
var ref=this.box.getElementsByTagName("LI")[0];
for (var i=1;i<data.length;++i ) {
var n=ref.cloneNode(true);
n.getElementsByTagName("IMG")[0].src=imgPath+(i+1)+'.jpg';
ref.parentNode.appendChild(n);
};
},
next:function (){this.nav(1)},
prev:function (){this.nav(-1)},
nav:function (nav){
this.index+=nav;
if(this.index<0)this.index=this.list.length-1;
if(this.index==this.list.length)this.index=0;
this.fx(this.box,this.index*468);
},
stop:function (){clearTimeout(this.autoTimer);},
auto:function (){
this.stop();
this.autoTimer=setInterval(function(){Google.next();},2000);
},
showPage:function (){this.page.innerHTML=this.index+1+'/'+this.list.length},
init:function (box,data){
this.box=document.getElementById(box);
this.addElements(data);
this.list=this.box.getElementsByTagName("LI");
this.page=document.getElementById("page");
this.showPage();
this.auto();
}
};
Google.init('google',Array(10));
</script>
</body>
</html>[/code]

javascript简单的新闻滚动切换效果

最新相关教程

热门教程

推荐教程