JavaScript实现图片横向移动（转载）

<script type="text/javascript" defer>
var marquee_spd = 25; // 滚动速度，数值越小越快
var repeat = null;
var obj_marquee = document.getElementById("ImgList");//本例中的<div id=ImgList>
function marquee_init()
{
    var obj_unit = obj_marquee.firstChild;
    var marquee_high = parseInt(obj_marquee.style.height);
    var marquee_wide = parseInt(obj_marquee.style.width);
    var unit_high = obj_unit.offsetHeight;
    var unit_wide = obj_unit.offsetWidth;
    var m = 0, n = 0, i = 0;
    var tmp = null;

    m = Math.ceil(marquee_wide / unit_wide);
    n = Math.ceil(marquee_high / unit_high);

    obj_unit.style.width = marquee_wide * (m + 1);
    obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width;

    for(i = 0; i < m; i++) {
        tmp = obj_unit.rows[0].insertCell(-1);
        tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML;
        tmp.style.width = marquee_wide;
        tmp = null;
    }

    for(i = 0; i < n; i++) {
        obj_marquee.appendChild(obj_unit.cloneNode(true));
    }

    return;
}

function marquee_show(direction)
{
    switch(direction) {
        case "up":
            if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
                obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight;
            } else {
                obj_marquee.scrollTop++;
            }
            break;
        case "down":
            if(obj_marquee.scrollTop <= 0) {
                obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight;
            } else {
                obj_marquee.scrollTop--;
            }
            break;
        case "left":
            if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth) {
                obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
            } else {
                obj_marquee.scrollLeft++;
            }
            break;
        case "right":
            if(obj_marquee.scrollLeft <= 0) {
                obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
            } else {
                obj_marquee.scrollLeft--;
            }
            break;
        default:
            break;
    }
    return;
}

function marquee_doit()
{
    var direction = "";
    direction = obj_marquee.getAttribute("direction");
    if(direction != null) marquee_show(direction);
    direction = obj_marquee.getAttribute("direction2");
    if(direction != null) marquee_show(direction);
    return;
}

function startMove()
{
marquee_init();
repeat = setInterval("marquee_doit()", marquee_spd);

obj_marquee.onmouseover = function() { clearInterval(repeat); }
obj_marquee.onmouseout = function() { repeat = setInterval("marquee_doit()", marquee_spd); }
}

startMove();
</script>

DIV代码:

图片列表
<div id="ImgList" direction="left" style="overflow:hidden;height:100px;width:700px"> 
    <table width="1728" border="0" cellspacing="0" cellpadding="0" ID="Table1">
        <tr>
        <td>
            <table cellspacing=0 cellpadding=0 border=0 align="center" ID="Table2">
            <tbody> 
            <tr>  
                
                <td bordercolor=#ffffff width="102" height="108"> 
                <div align="center"><a href="#" target="_blank"><img src="1.jpg" width=86 border="0" hspace=8></a><br>
                    <img src="space.gif" width="3" height="3"><br>
                    <font color="#0000CC" >图片1</font></div>
                </td>
                
                
                <td bordercolor=#ffffff width="102" height="108"> 
                <div align="center"><a href="#" target="_blank"><img src="2.jpg" width=86 border="0" hspace=8></a><br>
                    <img src="space.gif" width="3" height="3"><br>
                    <font color="#0000CC" >图片2</font></div>
                </td>
                </tr>
            </tbody> 
            </table>
        </td>
        </tr>
    </table>
 </div>