源代码下载：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>

JavaScript实现简单图片滚动 --9张图告诉你，C罗欲哭无泪的更多相关文章

  1. 一张图告诉你为什么 Gmail 是最好的邮箱，以及大量私货

    今天早上,我的同事详细介绍了 Gmail 相比其他邮箱的优势,比如强大的垃圾邮件过滤.简单的使用界面.强大的功能设置等等.但是对我来说,这些并不是我使用 Gmail 的最重要原因. 我第一个正式的邮箱 ...

  2. 一张图告诉你：Android系统哪代强？

    一张图告诉你:Android系统哪代强? 新浪科技 王上 谷歌发布Android 1.5 的时候,开始以甜点命名,作为每个版本代表的甜点的尺寸越变越大.谷歌在2014年10月中旬发布了Android ...

  3. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  4. 一张图告诉你，只会JavaScript还不够！

    会了JavaScript语法,你就真的会了JavaScript吗,来看这张图!是超实用的JavaScript代码段一书的导览!熊孩子们,赶紧学习去吧!

  5. 程序员深夜惨遭老婆鄙视，原因竟是CAS原理太简单？| 每一张图都力求精美

    悟空 种树比较好的时间是十年前,其次是现在. 自主开发了Java学习平台.PMP刷题小程序.目前主修Java.多线程.SpringBoot.SpringCloud.k8s. 本公众号不限于分享技术,也 ...

  6. 用两张图告诉你，为什么你的App会卡顿?

    有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? 知道Android究竟是如何在屏幕上显示我们期望的画面的? 对Android的视图架构有整体把握. 学会 ...

  7. 一张图告诉你，只会NodeJS还远远不够！

    NodeJS看似小巧简单,却威力无边,一张图,秒懂!!! 可能很多人还不会安装,但至少已经会了javascript,或者至少会了jquery,那么js还可以干更多的事情!js还可以干更多的事情!js还 ...

  8. 一张图告诉你，只会HTML还不够！

    会了HTML和HTML5语法,你就真的会了HTML吗,来看这张图!是这本<超实用的HTML代码段>入门实例书的导览!熊孩子们,赶紧学习去吧! 如果一半以上的你都不会,必须看这本书,阿里一线 ...

  9. 一张图告诉你，只会这些HTML还远远不够！！！！！

    不知道自己HTML水平如何,不知道HTML5如何进化?看这张图 如果一半以上的你都不会,必须看这本书,阿里一线工程师用代码和功能页面来告诉你每一个技术点. 都会一点,但不知道如何检验自己,看看本书提供 ...

随机推荐

  1. [Node.js] Node Util Promisify - How to Convert Callback Based APIs to Promise-based

    Since Node.js V8.0+, it introduces a 'util' libaray, which has a 'promisfy' function. It can conver ...

  2. poj 3122

    Pie Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10309   Accepted: 3651   Special Ju ...

  3. C#调用天气预报网络服务

    本程序通过调用网络上公开的天气预报网络服务来显示某个地区三天的天气,使用到的网络服务地址:http://www.webxml.com.cn/WebServices/WeatherWebService. ...

  4. 编程——C语言的问题,堆栈

    堆和栈的区别一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...

  5. django-rest-framework框架 第三篇 之CRUD视图扩展类(增删改查的优化)

    CRUD视图扩展类 1 CreateModelMixin 2 RetrieveModelMixin 3 UpdateModelMixin 4 DestroyModelMixin <1> 创 ...

  6. 【codeforces 434 div 1 A】Did you mean...

    [链接]h在这里写链接 [题意] 让你维护一段序列. 这段序列,不会出现连续3个以上的辅音. (或者一块全是辅音则也可以) (用空格可以断开连续次数); 要求空格最小. [题解] 模拟着,别让它出现连 ...

  7. HDU 5237 Base64

    Base64 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Sub ...

  8. 零基础学python-2.3 凝视

    在python里面,使用"#"号表示凝视的開始,一整行到结束就是凝视,他的主要作用提示这段代码到底有什么用处 print("---------欢迎来到猜数字的地方.请開始 ...

  9. C语言深度剖析-----C语言中的字符串

    S1字符数组 S2字符串,存在于栈空间 S3最常规的写字符串的方法,malloc是堆空间,存在于只读存储区,我们不能够改变指向S3的数据 S4堆空间  S4 字符串的长度 判断字符串长度,assert ...

  10. Codeforces Round #315 (Div. 2) (ABCD题解)

    比赛链接:http://codeforces.com/contest/569 A. Music time limit per test:2 seconds memory limit per test: ...