<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <style>
        img{
            width: 200px;
            
            position: absolute;
            background-color: #ffffff
        }

    </style>
</head>
<body>
<form action="${pageContext.request.contextPath}/test" method="post">
    <input type="text" name="name">
    <input type="text" name="addr">
    <input type="submit">
</form>
<img src="${pageContext.request.contextPath}/imgg.gif" id="img1" >
<img src="${pageContext.request.contextPath}/timg.gif" id="img" >
<script>
    var w ;//页面的宽度
    var img;//图像对象
    var img1;//图像对象
    var imgLeft;//图像左边的位置
    var imgWidth; //图像 的宽度
    var delta =5 ;//每次移动的距离
    var delay =30;//时间

    window.onload = function(){
        w = window.innerWidth;
        img = document.getElementById("img");
        img1 = document.getElementById("img1");
        imgLeft = img.offsetLeft;
        imgWidth = img.width;
        move();
    };
    function move(){
        //判断图像是否越界（超出页面的宽度）这里我以整个页面宽度为边界
        if(imgLeft<0||imgLeft+imgWidth>w ){
            delta=-delta;//变号
        }

        img.style.left = imgLeft+delta+"px";
        img1.style.left = imgLeft+delta+"px";
        if(delta==-5){
            img1.style.zIndex=100;
        }else{
          img1.style.zIndex=0;
        }

        //移动位置后需要重新修改左边的位置
        imgLeft = img.offsetLeft;
        //重复不断调用函数
        setTimeout(move,delay);
    }

</script>
</body>
</html>

主要还是实现了。当然主要还是借鉴别人的方法。

但是别人的不完善，所以我完善了下