焦点向上补齐-CSDN博客

本文链接：https://blog.csdn.net/qq_35285268/article/details/52514397

<body>
<div id = 'box'>
<ul id = 'contents'>
<li><img src="img/img1.jpg"></li>
<li><img src="img/img2.jpg"></li>
<li><img src="img/img3.jpg"></li>
<li><img src="img/img4.jpg"></li>
<li><img src="img/img5.jpg"></li>
</ul>
</div>
<script type="text/javascript">
var n = 0;
var timer = null;
var contents = document.getElementById('contents');
var imgs = contents.getElementsByTagName('li');
timer = setInterval(function(){
if((imgs.length-1) * -170 == n){
n = 0;
}else{
n-=170;
}
startMove(contents,n,'top');
},2000)
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,null)[attr];
}
}
function startMove(obj,iTarget,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
lWidth = parseInt(getStyle(obj,'top'));
var speed = (iTarget - lWidth) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(lWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style[attr] = lWidth + speed + 'px';
}
},30)
}
</script>
</body>