实现图片的动态向右循环显示

window.onload = function() {
window.setInterval("dateTime()",1000);
var speed=10;
var tab=document.getElementById("scroll_father");
var tab1=document.getElementById("scroll_1");
var tab2=document.getElementById("scroll_2");
tab2.innerHTML=tab1.innerHTML;
tab.scrollLeft=tab1.offsetWidth;
function Marquee(){
if(tab.scrollLeft == 0) {
tab.scrollLeft=tab1.offsetWidth;
} else {
tab.scrollLeft--;
}
}
//设置循环现实
var MyMar=setInterval(Marquee,speed);
//设置当鼠标移到时暂停

tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
}
function dateTime(){
var times=document.getElementById("dateTimes");
var nowdate=new Date();
times.innerText= nowdate.toLocaleString();

}
=================================================================
css样式中

.con {
width:201%;
height:84px;
}
.con dl {
float:right;
width:804px;
}
.con dl dd {
float:left;
height::150px;
width:122px;
margin-left:10px;
display:inline;
border:1px solid #CCC;
overflow:hidden;
}
.con dl dd img {
width:120px;
height:150px;
overflow:hidden;
border:1px solid white;
}
====================================================================


html中

====================================


<div class="main" id="scroll_father">
              <div class="con">
                <dl id="scroll_1">
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                  <dd><img src="images/82.jpg" width="115" height="150" /></dd>
                </dl>
                <dl id="scroll_2">
                  &nbsp;
                </dl>
              </div>
              <div class="clear">&nbsp;</div>
            </div>