JavaScript實(shí)現(xiàn)簡單圖片滾動(dòng)附源碼下載

更新時(shí)間：2014年06月17日 16:52:43 投稿：whsnow

JavaScript實(shí)現(xiàn)簡單圖片滾動(dòng)，9張圖告訴你，C羅欲哭無淚，另附源碼下載，方便學(xué)習(xí)

昨晚德國和葡萄牙的焦點(diǎn)之戰(zhàn)你看了嗎？北京時(shí)間凌晨的比賽中，C羅領(lǐng)銜的葡萄牙0-4德國被完滅……他是金球獎(jiǎng)得主、歐洲金靴、歐冠冠軍核心，在葡萄牙隊(duì)……9張圖 C羅告訴你什么叫欲哭無淚

復(fù)制代碼代碼如下:

 
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Scroll Image</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<style type="text/css"> 
body 
{ 
font-size:12px; 
font-family: "Microsoft Yahei",'微軟雅黑','SimSun','宋體'; 
margin: 0px; 
padding:0px; 
text-align: center; 
} 
img 
{ 
width: 150px; 
height: 150px; 
} 
.news_root 
{ 
width: 225px; 
height: 134px; 
text-align: left; 
margin: 0 auto; 
} 
div .news_header 
{ 
width: 243px; 
height: 16px; 
vertical-align: top; 
text-align: left; 
font-size: 14px; 
padding: 6px; 
} 
#scrollContainer 
{ 
width: 345px; 
margin: 2px 5px; 
overflow: hidden; 
text-align: left; 
} 
</style> 
</head> 
<body> 
<div class="news_root"> 
<div class="news_header">C羅不哭，加油</div> 
<div id="scrollContainer"> 
<div id="scrollContent"> 
<table border="0"> 
<tr align="middle"> 
<td id="firstCol"> 
<table border="0"> 
<tr> 
<td><img src="c1.jpg" alt="C羅加油"></td> 
<td><img src="c2.jpg" alt="C羅加油"></td> 
<td><img src="c3.jpg" alt="C羅加油"></td> 
<td><img src="c4.jpg" alt="C羅加油"></td> 
<td><img src="c5.jpg" alt="C羅加油"></td> 
<td><img src="c6.jpg" alt="C羅加油"></td> 
<td><img src="c7.jpg" alt="C羅加油"></td> 
<td><img src="c8.jpg" alt="C羅加油"></td> 
<td><img src="c9.jpg" alt="C羅加油"></td> 
</tr> 
</table> 
</td> 
<td id="lastCol"></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
var stopscroll = false; 
var scrollContHeight = 155; 
var scrollContWidth = 300; 
var scrollSpeed = 25; 

var scrollContainer = document.getElementById('scrollContainer'); 
var scrollContent = document.getElementById('scrollContent'); 
var firstCol = document.getElementById('firstCol'); 
var lastCol = document.getElementById('lastCol'); 

//將第一列的內(nèi)容復(fù)制到第二列，讓滾動(dòng)看起來連續(xù) 
lastCol.innerHTML = firstCol.innerHTML; 
scrollContainer.style.width = scrollContWidth+"px"; 
scrollContainer.style.height = scrollContHeight+"px"; 
scrollContainer.noWrap = true; 
scrollContainer.onmouseover = new Function("stopscroll=true;"); 
scrollContainer.onmouseout = new Function("stopscroll=false;"); 

function init() 
{ 
scrollContainer.scrollLeft = 0; 
setInterval(scrollLeft1,scrollSpeed); 
} 
init(); 
var currleft = 0; 
function scrollLeft1() 
{ 
if(stopscroll == true) return; 
currleft = scrollContainer.scrollLeft; 
scrollContainer.scrollLeft += 1; 
if(currleft == scrollContainer.scrollLeft) 
{ 
scrollContainer.scrollLeft = 0; 
scrollContainer.scrollLeft += 1; 
} 
} 
</script> 
</body> 
</html></span> 