JS 实现产品图片的轮播，支持向左向右滚动

最近给同学做个企业网站，需要将产品图片滚动，下面是实现的代码：

这是html的，主要是左右两个箭头图标，以及中间的图片：

  <div style="width:20px;height:130px;float:left;background:url(images/youjiantou.jpg);margin-left:10px;margin-right:10px;" onclick="GotoLeft()"></div>
  <div id="demox" style="width:880px;overflow:hidden;position: relative;float:left">    
  <div id="demo11" style="position: relative;">
  <div style="margin-top:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡1</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡2</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #FF3333;"/><div style="width:130px;height:20px;text-align:center">氯化蜡3</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡4</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡5</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡6</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡7</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡8</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡9</div></div>
  <div style="margin-left:20px;margin-top:15px;float:left;width:130px;height:130px;cursor:pointer"><img alt="" src="images/天空1.jpg" style="width:130px;height:110px;border:2px solid #aaaaaa;"/><div style="width:130px;height:20px;text-align:center">氯化蜡10</div></div>
  </div>
  </div>
17   <div style="width:20px;height:130px;float:left;background:url(images/zuojiantou.jpg);margin-left:10px;" onclick="GotoRight()"></div>

 

下面是相应实现的Js:

//点击向左的箭头，图片往左翻滚
function GotoLeft() {
    clearInterval(MyMar);
    MyMar = setInterval(Marquee_left, speed);
    demox.onmouseover = function () { clearInterval(MyMar) };
    demox.onmouseout = function () { MyMar = setInterval(Marquee_left, speed) };
}
//图片向右翻转
function GotoRight() {
    clearInterval(MyMar);
    MyMar = setInterval(Marquee_right, speed);
    demox.onmouseover = function () { clearInterval(MyMar) };
    demox.onmouseout = function () { MyMar = setInterval(Marquee_right, speed) };
   
}

//图片向右滚动滚动
function Marquee_right() {
    //alert(demox.scrollLeft + "   " + demo11.offsetWidth);
    if (demox.scrollLeft <= 0) {
        demox.scrollLeft += demo11.offsetWidth;
    }
    else {
        demox.scrollLeft--;
    }
}

//图片向左滚动滚动
function Marquee_left() {
        demox.scrollLeft++;
}