此文件包括了javascrpt动画的点击滚动，单向滚动，循环滚动，不同的封装方法：自创建属性法、闭包法，还就事件的两种不同的绑定方式。原文件中有完整的注释说明。并且附件中的示例可运行。
<!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>无标题文档</title>
<style type="text/css">
#outer{ width:400px; height:400px; margin:0 auto; position:relative; clear:both; overflow:hidden;}
#inner{width:2000px; height:400px; overflow:hidden; position:absolute; top:0px; left:0px;}
#inner div{ float:left; width:400px; height:400px; background:url(images/01.gif);}
ul{width:600px; margin:0 auto;}
ul li{width:100px; height:100px; background:green; float:left; margin-right:20px;}
</style>
<script type="text/javascript">
var animate = null;
function move(nTarget) {
window.clearTimeout(animate);
var oDiv = document.getElementById('inner');
var nDivLeft = oDiv.offsetLeft;
if (nDivLeft > nTarget) {//向左走
if (nDivLeft <= nTarget) {
//空
}
else {
/*处理过界的问题
if(nDivLeft - 19 <nTarget){
oDiv.style.left = nTarget + "px";
}else
oDiv.style.left = nDivLeft - 19 + "px";
*/
var nSpeed=Math.floor((nTarget-nDivLeft)/10);//减速算法
//如果向左运动则用Math.floor
oDiv.style.left = nDivLeft +nSpeed + "px";
//以下是setTimeout的几种写法
animate = window.setTimeout(function () { move(nTarget); }, 10);
//animate = window.setTimeout("move(" + nTarget + ")", 10);
//window.setTimeout("move(nTarget)", 10);
//window.setTimeout(move,10);
}
} else {//向右走
if (nDivLeft >= nTarget) {
}
else {
/*处理过界的问
if(nDivLeft + 19>nTarget)
oDiv.style.left = nTarget + "px";
else
oDiv.style.left = nDivLeft + 19 + "px";
*/
var nSpeed=Math.ceil((nTarget-nDivLeft)/10);//减速算法
//如果向右运动则用Math.ceil
oDiv.style.left = nDivLeft +nSpeed + "px";
animate=window.setTimeout("move(" + nTarget + ")", 10);
}
}
}
function bind() {//用JS代码为四个li的onclick绑定方法
var oLis = document.getElementById('myul').getElementsByTagName('li');
/* 麻烦的方式
oLis.item(0).onclick = function () { move(0) }
oLis.item(1).onclick = function () { move(-400) }
oLis.item(2).onclick = function () { move(-800) }
oLis.item(3).onclick = function () { move(-1200) }
*/
/* 错误的方式
for (var i = 0; i < oLis.length; i++) {
oLis.item(i).onclick = function () { move(i * -400) }
}//当click被触发的时候，i的值已经是4了
*/
/* 用闭包来解决
for (var i = 0; i < oLis.length; i++) {
(function fn(m) {
oLis.item(m).onclick = function () { move(m * -400) }
})(i);
}
*/
/* 给HTML自创建一个属性的方式 */
for (var i = 0; i < oLis.length; i++) {
oLis.item(i).nIndex = i;
oLis.item(i).onclick = function () {
clearTimeout(autoAnimte);//点击li时取消自动滚动
move(this.nIndex * -400) }
}
}
var num = 0;
var autoAnimte = null;
function autoMove() {//自动滚动的方法
clearTimeout(autoAnimte);
if (num == 4) {//如果走到头了则往回走
num = 0;
}
move(num * -400);
num++; //num=num+1;
autoAnimte=setTimeout(autoMove,2000);
}
function autoMove2() {
clearTimeout(autoAnimte);
if (num == 5) {//如果走到头了则往回走
num = 0;
document.getElementById('inner').style.left = 0;
}
move(num * -400);
num++; //num=num+1;
autoAnimte = setTimeout(autoMove2, 2000);
}
//window.onload = function () { bind(); autoMove2(); }
function bindEvent(fn) {
if (typeof fn != 'function') {
alert('参数类型不正确');
return;
}
var oldFn = window.onload;
if ((typeof oldFn) == 'function') {
window.onload = function () { oldFn(); fn() }
} else {
window.onload = fn;
}
}
//bindEvent(bind);
//bindEvent(autoMove2);
//bindEvent(222);
//document.getElementById('myul').getElementsByTagName('li').item(0).addEventListener('click',function () { clearTimeout(autoAnimte);//点击li时取消自动滚动
// move(this.nIndex * -400) },false);
if(window.addEventListener){
window.addEventListener("load",bind,false);
window.addEventListener('load',autoMove2,false);
}
if(window.attachEvent){
window.attachEvent('onload',bind)//ie
//attachEvent
window.attachEvent('onload',autoMove2);
}
</script>
</head>
<body>
<ul id='myul'><li >1</li><li >2</li><li >3</li><li>4</li></ul>
<div id="outer">
<div id="inner">
<div>1</div>
<div style=" background:url(images/02.gif);">2</div>
<div style=" background:url(images/03.gif);">3</div>
<div style=" background:url(images/04.gif);">4</div>
<div>5555555555555555555 -1600</div>
</div>
</div>
</body>
</html>
霍营市场监督管理所投诉举报电话：010-60787760 | 