JavaScript实现简单图片滚动附源码下载
<spanstyle="font-size:14px;"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScrollImage</title>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<styletype="text/css">
body
{
font-size:12px;
font-family:"MicrosoftYahei",'微软雅黑','SimSun','宋体';
margin:0px;
padding:0px;
text-align:center;
}
img
{
width:150px;
height:150px;
}
.news_root
{
width:225px;
height:134px;
text-align:left;
margin:0auto;
}
div.news_header
{
width:243px;
height:16px;
vertical-align:top;
text-align:left;
font-size:14px;
padding:6px;
}
#scrollContainer
{
width:345px;
margin:2px5px;
overflow:hidden;
text-align:left;
}
</style>
</head>
<body>
<div>
<div>C罗不哭，加油</div>
<divid="scrollContainer">
<divid="scrollContent">
<tableborder="0">
<tralign="middle">
<tdid="firstCol">
<tableborder="0">
<tr>
<td><imgsrc="c1.jpg"alt="C罗加油"></td>
<td><imgsrc="c2.jpg"alt="C罗加油"></td>
<td><imgsrc="c3.jpg"alt="C罗加油"></td>
<td><imgsrc="c4.jpg"alt="C罗加油"></td>
<td><imgsrc="c5.jpg"alt="C罗加油"></td>
<td><imgsrc="c6.jpg"alt="C罗加油"></td>
<td><imgsrc="c7.jpg"alt="C罗加油"></td>
<td><imgsrc="c8.jpg"alt="C罗加油"></td>
<td><imgsrc="c9.jpg"alt="C罗加油"></td>
</tr>
</table>
</td>
<tdid="lastCol"></td>
</tr>
</table>
</div>
</div>
</div>
<scripttype="text/javascript">
varstopscroll=false;
varscrollContHeight=155;
varscrollContWidth=300;
varscrollSpeed=25;
varscrollContainer=document.getElementById('scrollContainer');
varscrollContent=document.getElementById('scrollContent');
varfirstCol=document.getElementById('firstCol');
varlastCol=document.getElementById('lastCol');
//将第一列的内容复制到第二列，让滚动看起来连续
lastCol.innerHTML=firstCol.innerHTML;
scrollContainer.style.width=scrollContWidth+"px";
scrollContainer.style.height=scrollContHeight+"px";
scrollContainer.noWrap=true;
scrollContainer.onmouseover=newFunction("stopscroll=true;");
scrollContainer.onmouseout=newFunction("stopscroll=false;");
functioninit()
{
scrollContainer.scrollLeft=0;
setInterval(scrollLeft1,scrollSpeed);
}
init();
varcurrleft=0;
functionscrollLeft1()
{
if(stopscroll==true)return;
currleft=scrollContainer.scrollLeft;
scrollContainer.scrollLeft+=1;
if(currleft==scrollContainer.scrollLeft)
{
scrollContainer.scrollLeft=0;
scrollContainer.scrollLeft+=1;
}
}
</script>
</body>
</html></span>
源码下载