图片横向滚动！！JS-鼠标可控制~~~

        <div id="demo" style="overflow:hidden; width:720px; color:#333333; height:100px; margin:0px 0px 0 0; display:inline; float:left;" οnmοusemοve="MoveDiv(event);" οnmοuseοut="MoveOutDiv();">      <div id="demo1" style="width:100%;">          <table cellspacing="0" cellpadding="0">               <tbody>                 <tr valign="top">                   <td valign="top" >                   <center>           <table>               <tr>            <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>        <td><a href="#"><img src="image/未命名.jpg"   alt=""/><br /><span>绝美风景</span></a></td>       </tr>      </table>      </center>      </td>      <td width="0">     <div id="demo2" style="width:100%;"></div>     </td>     </tr>    </tbody>  </table>    </div>    <script type="text/javascript">        document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;        MyMar = setInterval(Marquee, speed);    </script> </div>

 

 

 

 

 

 

 

 

 

  <script type="text/javascript">

 

var dir = 1; //每步移动像素，大＝快var speed = 10; //循环周期（毫秒）大＝慢var MyMar = null;function Marquee() {//正常移动    var demo = document.getElementById("demo");    var demo2 = document.getElementById("demo2");    if (dir > 0 && (demo2.offsetWidth - demo.scrollLeft) <= 0) {        demo.scrollLeft = 0;    }    if (dir < 0 && (demo.scrollLeft <= 0)) {        demo.scrollLeft = demo2.offsetWidth;    }    demo.scrollLeft += dir;}function onmouseoverMy() {    window.clearInterval(MyMar);} //暂停移动function onmouseoutMy() {    MyMar = setInterval(Marquee, speed);} //继续移动function r_left() {    if (dir == -1)        dir = 1;} //换向左移function r_right() {    if (dir == 1)        dir = -1;} //换向右移

function IsIE() {    var browser = navigator.appName    if ((browser == "Netscape")) {        return false;    }    else if (browser == "Microsoft Internet Explorer") {        return true;    }    else {        return null;    }}

var _IsIE = IsIE();var _MousePX = 0;var _MousePY = 0;var _DivLeft = 0;var _DivRight = 0;var _AllDivWidth = 0;var _AllDivHeight = 0;function MoveDiv(e) {    var obj = document.getElementById("demo");    _MousePX = _IsIE ? (document.body.scrollLeft + event.clientX) : e.pageX;    _MousePY = _IsIE ? (document.body.scrollTop + event.clientY) : e.pageY;    //Opera Browser Can Support ''window.event'' and ''e.pageX''    var obj1 = null;    if (obj.getBoundingClientRect) {        //IE        obj1 = document.getElementById("demo").getBoundingClientRect();        _DivLeft = obj1.left;        _DivRight = obj1.right;        _AllDivWidth = _DivRight - _DivLeft;    }    else if (document.getBoxObjectFor) {        //FireFox        obj1 = document.getBoxObjectFor(obj);        var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;        _DivLeft = parseInt(obj1.x) - parseInt(borderwidth);        _AllDivWidth = Cut_Px(obj.style.width);        _DivRight = _DivLeft + _AllDivWidth;    }    else {        //Other Browser(Opera)        _DivLeft = obj.offsetLeft;        _AllDivWidth = Cut_Px(obj.style.width);        var parent = obj.offsetParent;        if (parent != obj) {            while (parent) {                _DivLeft += parent.offsetLeft;                parent = parent.offsetParent;            }        }        _DivRight = _DivLeft + _AllDivWidth;    }

    var pos1, pos2;    pos1 = parseInt(_AllDivWidth * 0.4) + _DivLeft;    pos2 = parseInt(_AllDivWidth * 0.6) + _DivLeft;

    if (_MousePX > _DivLeft && _MousePX < _DivRight) {        if (_MousePX > _DivLeft && _MousePX < pos1)//Move left        {            r_left();        }        else if (_MousePX < _DivRight && _MousePX > pos2)//Move right        {            r_right();        }

        if (_MousePX > pos1 && _MousePX < pos2)//Stop        {            onmouseoverMy();            MyMar = null;        } else if (_MousePX < pos1 || _MousePX > pos2) {            if (MyMar == null) {                MyMar = setInterval(Marquee, speed);            }        }    }}

function Cut_Px(cswidth) {    cswidth = cswidth.toLowerCase();    if (cswidth.indexOf("px") != -1) {        cswidth.replace("px", "");        cswidth = parseInt(cswidth);    }    return cswidth;}

function MoveOutDiv() {    if (MyMar == null) {        MyMar = setInterval(Marquee, speed);    }}  </script>