函数startMove的实现
function startMove(node
, cssObj
, complete
){
clearInterval(node
.timer
);
node
.timer
= setInterval(function(){
var isEnd
= true;
for(var attr
in cssObj
){
var iTarget
= cssObj
[attr
];
var iCur
= null;
if(attr
== "opacity"){
iCur
= parseInt(parseFloat(getStyle(node
, "opacity")) * 100);
}else{
iCur
= parseInt(getStyle(node
, attr
))
}
var speed
= (iTarget
- iCur
) / 8;
speed
= speed
> 0 ? Math
.ceil(speed
) : Math
.floor(speed
);
if(attr
== "opacity"){
iCur
+= speed
;
node
.style
.opacity
= iCur
/ 100;
node
.style
.filter
= "alpha(opacity=" + iCur
+ ")";
}else{
node
.style
[attr
] = iCur
+ speed
+ 'px';
}
if(iCur
!= iTarget
){
isEnd
= false;
}
}
if(isEnd
){
clearInterval(node
.timer
);
if(complete
){
complete
.call(node
);
}
}
}, 30);
}
function getStyle(node
, cssStr
){
return node
.currentStyle
? node
.currentStyle
[cssStr
] : getComputedStyle(node
)[cssStr
];
}
引入函数startMove 并且写出整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
*{margin: 0;padding: 0;}
#div{width:400px;height:400px;margin: 200px auto;border: 1px solid black;position: relative;overflow: hidden;}
#ul {width:1600px;height:400px;position: absolute; left: 0px;}
#ul li{width:400px;height:400px;float: left;list-style: none;}
#ul li img{width: 100%;height: 100%;}
</style>
<script src = "../startMove.js">
</script>
<script>
window.onload = function(){
var div = document.getElementById("div");
var ul = document.getElementById("ul");
ul.innerHTML +=ul.innerHTML;
ul.style.width = 1600 * 2 +"px";
setInterval(function(){
startMove(ul,{left:ul.offsetLeft - 400},function(){
if(ul.offsetLeft <= - ul.offsetWidth /2){
ul.style.left = 0 +"px";
}
});
},2000);
}
</script>
</head>
<body>
<div id="div">
<ul id ="ul">
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/4.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
