源代码下载：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. crm翻译导航栏

    在crm里面怎样翻译导航栏? 过程例如以下: 1 先新建一个解决方式.把网站地图加进去 2: 然后把这个解决方式到出来来,解压文件: 3:编辑第二个文件: watermark/2/text/aHR0c ...

  2. leetCode 103.Binary Tree Zigzag Level Order Traversal （二叉树Z字形水平序） 解题思路和方法

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  3. 软件——keil的查找,错误,不能跳转到相应的行

    为什么MDK  keil4.7双击搜索结果不能跳转到相应位置 KEIL搜索的时候双击不跳转到相应的位置 为什么keil点击不能跳转到错误处的问题 在keil中,双击Find In Files中某一行, ...

  4. POJ 1325 Machine Schedule(zoj 1364) 最小覆盖数

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=364 http://poj.org/problem?id=1325 题目大意: ...

  5. change_names

    DC在储存网表时,有时会采用特殊的字符 比如表示总线BUS[7]-BUS[0] 会表示成\BUS[7]    \BUS[6]...... 在compile命令之后,write命令之前  加上:chan ...

  6. 【例题 6-8 UVA - 548】Tree

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 后序遍历的最后一个是根节点. ->然后在中序遍历中找到这个节点. 分为左右两段. 然后递归上述操作就好. 题目描述好坑啊. 原 ...

  7. [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js

    You often use the same data in different ways across pages. This lesson walks you through setting up ...

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

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

  9. springboot(十四)：springboot整合shiro-登录认证和权限管理（转）

    springboot(十四):springboot整合shiro-登录认证和权限管理 .embody{ padding:10px 10px 10px; margin:0 -20px; border-b ...

  10. NoSql中的B-tree、B+tree和LSM-tree 分类： B7_HBASE 2015-03-15 18:27 85人阅读 评论(0) 收藏

    总结: 1.B+树将数据完全排序,读数据时很快,但当要修改数据时,就需要将新入数据下面的数据重新排位,特别是当写入的数据排在较高的位置时,需要大量的移位操作才能完成写入. 2.SLM牺牲部分的读性能, ...