您的位置：首页 > Web前端 > JavaScript

JavaScript实现简单图片滚动附源码下载

2018-10-12 14:04 1136 查看

昨晚德国和葡萄牙的焦点之战你看了吗？北京时间凌晨的比赛中，C罗领衔的葡萄牙0-4德国被完灭……他是金球奖得主、欧洲金靴、欧冠冠军核心，在葡萄牙队……9张图 C罗告诉你什么叫欲哭无泪


<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'); 

//将第一列的内容复制到第二列，让滚动看起来连续 
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>

源码下载

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航