源代码下载：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. [Angular] Style HTML elements in Angular using ngStyle

    We will learn how to make use of the ngStyle directive to directly add multiple style attributes to ...

  2. 微服务实践（七）：从单体式架构迁移到微服务架构 - DockOne.io

    原文:微服务实践(七):从单体式架构迁移到微服务架构 - DockOne.io [编者的话]这是用微服务开发应用系列博客的第七篇也是最后一篇.第一篇中介绍了微服务架构模式,并且讨论了微服架构的优缺点: ...

  3. 读文件头数据判断 PE 文件格式和类型

    namespace X.Reflection { using System; using System.IO; public static partial class ReflectionX { pu ...

  4. 如何在本地运行查看github上的开源项目

    看中了一款很多星星的github的项目,想把这个项目拉到自己的电脑上运行查看项目效果,该怎么做?示例:我们今天要看的 github项目地址:https://github.com/lzxb/vue-cn ...

  5. 【Codeforces Round #445 (Div. 2) A】ACM ICPC

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 三重循环 [代码] #include <bits/stdc++.h> using namespace std; int ...

  6. Python 在线笔试

    1. 循环输入输出交互 Python在线笔试琐碎 求两个整数 A+B 的和. while True: try: (n, m) = (int(x) for x in raw_input().split( ...

  7. Java Tread多线程（2）多线程安全问题

    作者 :卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/39348093 本文演示,Tread多线程安全问题,以及几种解决多线程安全方式 ...

  8. goland 2018.2 激活

    感谢 http://blog.sina.com.cn/s/blog_1885d23df0102ydjc.html http://www.3322.cc/soft/38102.html 下载   htt ...

  9. 17、MJPG编码和AVI封装

    一.JPEG和MJPG编码介绍 1.JPEG编码 我个人简单的理解是,JPEG即是Joint Photographic Experts Group(联合图像专家组)的缩写,更是一种图像压缩编码算法.J ...

  10. Socket编程模型之完毕port模型

    转载请注明来源:viewmode=contents">http://blog.csdn.net/caoshiying?viewmode=contents 一.回想重叠IO模型 用完毕例 ...