小白求问－js实现网页图片移动

Question

<style>
#bill{
    height: 200px;
    width: auto;
    position: absolute;
}
</style>

<img src="100.jpeg" alt="100" id="bill">

<script>
var pic1 = document.getElementById('bill');
function move(){
    pic1.style.left = pic1.offsetLeft + (-1) + 'px';
}
var timer = setInterval(move, 10);
if(pic1.offsetLeft <= 0){
    clearInterval(timer);
}
</script>

我想让该图片实现简单的在页面中来回移动，

当图片的offset <= 0的时候，让其往右，当图片到达页面右端的时候再往左移动；

这应该要怎么实现？

为什么我写到

if(pic1.offsetLeft <= 0){
    clearInterval(timer);
}

这个的时候，图片反而也没有停止呢？

Answer 1

把if(pic1.offsetLeft <= 0){     clearInterval(timer); }放到move函数里