Question

滚动跪求高手写一JS图片滚动程序，在两个区块中。

跪求高手写一JS程序：要求在同一个页面的两个区（如div1、div2）播放来自后台数据库的图片，播放的方式：<div><ul><li>列表图片.....</li></ul></div>列表图片，当鼠标移动到左右按钮，图片

才开始左右滚动，就算才两张图片也滚动不停，直到鼠标移开才停止滚动，求高手给一javascript程序，谢谢。

Answer 1

<style>
.ny2010{ width:425px; height:300px;margin:1px 1px 1px 1px ;background: url(templates/default/images/bjmove02.png) 0 0 no-repeat;}
.ny2010 a{ text-decoration:none; color:#333333; font-size:12px;}
.ny2010 td img{ width:200px; height:200px; display:block; margin:0px 0px 2px 0; padding:1px; border:1px solid #CCCCCC;}
.ny2010 td p{ margin:0 5px 0 0; padding:0; line-height:19px; font-size:14px; font-weight:bold;}
.ny2010 td p span{ display:block; font-size:12px; font-weight:normal; color:#AE091B;}
.head #up #product .fcontent .piclist img {
border: 1px solid #99FF00;
}
.head #up #product .fcontent .piclist img:hover{
border: 1px solid #FF66FF;
}
#apDiv1 {
position:absolute;
width:34px;
height:59px;
z-index:1;
left: 680px;
top: 502px;
}
</style>

<script>
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>

<div class="ny2010">
<div id="demo" style="overflow:hidden; width:390px; color:#333333; height:260px; margin:2px 15px 0 15px; display:inline; float:right;" onMouseMove="MoveDiv(event);" onMouseOut="MoveOutDiv();">
<div id="demo1" >
<table cellspacing=0 cellpadding=0>
<tbody>
<tr valign=top>
<td valign=top nowrap>
<table>
<tr>
<td style="text-align:center;">内容</td>
</tr>
</table>
</td>
<td width="0">
<div id="demo2"></div>