实现图片的动态向右循环显示
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 id="scroll_father">
<div 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">
</dl>
</div>
<div class="clear"> </div>
</div>
