javascript无缝连续滚动动画效果
2011-10-26 16:07:01
272
<!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" />
<title>javascript无缝滚动示例--珠峰培训</title>
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
li{width:80px; background:yellow; height:2em; line-height:2em; float:left; margin:10px;}
#outer{width:180px;
clear:both;
position:relative; overflow:hidden;
background:#ccc;
height:160px; margin:40px auto;
}
#inner{width:960px; height:160px; position:absolute; top:0; left:0; }
#inner div{ height:160px; width:180px;
background:url(tu.png);
/*
请在这里找一张960*180的图代替即可，当然文件名和路径要正确
*/
float:left;}
</style>
</head>
<body>
<ul id="ul1"><li>第一张</li><li >第二张</li><li>第三张</li><li>第四张</li><li>第五张</li></ul>
<div id="outer" >
<div id="inner">
<div style="background-color:yellow;">1111111111111</div>
<div style=" background-color:red;background-position:-180px 0;">22222</div>
<div style=" background-color:green;background-position:-360px 0;">33333</div>
<div style=" background-color:blue;background-position:-540px 0;">44444</div>
<div style=" background-color:black;background-position:-720px 0;">555555</div>
</div>
</div>
</body>
</html>
<script type="text/ecmascript">
/*
珠峰培训 课堂示例
不间断单向向左滚动的图片
2011年10月22日
*/
function move(nIndex){
//var timer=null;
//window.clearTimeout(timer);
var oDiv=document.getElementById('inner');
window.clearTimeout(oDiv.timer);//清除动画积累的作用，防止动画抖动
var nSpeed=(nIndex*-180-oDiv.offsetLeft)/10//减速效果
//0 -400
if(nSpeed<0){
nSpeed=Math.floor(nSpeed); //把速度取整，要不然当距离终点还差4px时候，就不动了
oDiv.style.left=oDiv.offsetLeft+nSpeed+'px';
oDiv.timer=window.setTimeout(function(){move(nIndex)},30);
}else if(nSpeed>0){//把速度取整，要不然当距离终点还差4px时候，就不动
nSpeed=Math.ceil(nSpeed);
oDiv.style.left=oDiv.offsetLeft+nSpeed+'px';
oDiv.timer=window.setTimeout(function(){move(nIndex)},30);
}
}
var step=1;
var timer=null;
function autoMove(){//自动运行的方法
if(step==6){
document.getElementById('inner').style.left=0;
step=0;
}
move(step);
step++;
timer=window.setTimeout(autoMove,2000);
}
function getFirstElementChild(ele){//DOM方法，用来获取第一个元素子节点
if(ele.firstElementChild){
return ele.firstElementChild;
}else{
var child=ele.firstChild;
while(child){
if(child.nodeType==1)
return child;
else
child=child.nextSibling;
}
}
}
window.onload=function(){
var oInner=document.getElementById('inner');//获得inner这个元素
var oFirstNode=getFirstElementChild(oInner);//获得inner元素的第一个元素子节点
oInner.style.width=oInner.clientWidth+oFirstNode.offsetWidth+'px';//改变inner的宽，使之能够多放一个盒子
var oCloneNode=oFirstNode.cloneNode(true);
oCloneNode.innerHTML='66666666666666666';//只是为了加个标识
oInner.appendChild(oCloneNode);
//把第一个子节点复制，并且追加到inner,使inner的第一个儿子和最后一个儿子是相同的
autoMove();//运行这个自动滚动的方法
var oLis=document.getElementById('ul1').getElementsByTagName('li');
for(var i=0;i<oLis.length;i++){//给li的onclick绑定以下方法
(function(nIndex){//用闭包的方式绑定
oLis.item(nIndex).onclick=function(){
move(nIndex);
step=nIndex+1;//让下一次自动滚动时，滚动到当前的下一张图片上去
clearTimeout(timer);//如果点击li，则停止自动滚动
setTimeout(autoMove,3000);//3秒之后再自动滚动
}
})(i)
}
}
</script>
