JavaScript实现简单图片滚动 --9张图告诉你，C罗欲哭无泪

来源：互联网发布：线性代数与矩阵论编辑：程序博客网时间：2024/04/25 17:04

源码下载：http://download.csdn.net/detail/u011043843/7510425

昨晚德国和葡萄牙的焦点之战你看了吗？北京时间凌晨的比赛中，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>

0 0