js实现左右移动的图片

左右移动的图片[修改图片名称即可][共2步]

====1、将以下代码加入到HEML的<head></head>之间：

<script LANGUAGE="JavaScript">
<!--
step = 0;
obj = new Image();

function anim(xp, xk, smer) //smer = direction
{
    obj.style.left = x;
    x += step * smer;
    if (x >= (xk + xp) / 2) {
        if (smer == 1)
            step--;
        else
            step++;
    } else {
        if (smer == 1)
            step++;
        else
            step--;
    }
    if (x >= xk) {
        x = xk;
        smer = -1;
    }
    if (x <= xp) {
        x = xp;
        smer = 1;
    }
    // if (smer > 2) smer = 3;
    setTimeout('anim(' + xp + ',' + xk + ',' + smer + ')', 50);
}

function moveLR(objID, movingarea_width, c) {
    if (navigator.appName == "Netscape")
        window_width = window.innerWidth;
    else
        window_width = document.body.offsetWidth;
    obj = document.images[objID];
    image_width = obj.width;
    x1 = obj.style.left;
    x = Number(x1.substring(0, x1.length - 2)); // 30px -> 30
    if (c == 0) {
        if (movingarea_width == 0) {
            right_margin = window_width - image_width;
            anim(x, right_margin, 1);
        } else {
            right_margin = x + movingarea_width - image_width;
            if (movingarea_width < x + image_width)
                window.alert("No space for moving!");
            else
                anim(x, right_margin, 1);
        }
    } else {
        if (movingarea_width == 0)
            right_margin = window_width - image_width;
        else {
            x = Math.round((window_width - movingarea_width) / 2);
            right_margin = Math.round((window_width + movingarea_width) / 2) - image_width;
        }
        anim(x, right_margin, 1);
    }
}
//-->
</script>

====2、将以下代码加入到HEML的<body></body>之间：

<img src="要显示的图片名称.gif" name="picture" style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40">

<script LANGUAGE="JavaScript">

<!--

setTimeout("moveLR('picture',300,1)",10);

//-->

</script>