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

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

//点击向左的箭头，图片往左翻滚
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++;
}