源代码下载：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. java与javax的区别分析

    Java是一种受C语言影响的编程语言.Java和Javax本质上是与Java编程语言的上下文一起使用的包.实际上Java和Javax没有区别.这只是不同的名字. Java是一种编程语言,受到C语言的影 ...

  2. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  3. 微服务实践（五）：微服务的事件驱动数据管理 - DockOne.io

    原文:微服务实践(五):微服务的事件驱动数据管理 - DockOne.io [编者的话]本文是使用微服务创建应用系列的第五篇文章.第一篇文章介绍了微服务架构模式,并且讨论了使用微服务的优缺点:第二和第 ...

  4. [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime

    Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...

  5. 为什么通过空指针（NULL）能够正确调用类的部分成员函数

    #include <iostream> using namespace std; class B { public: void foo() { cout << "B ...

  6. rz、sz （上传下载）命令参数的解释

    $ man rz,查看帮助: -a, –ascii -b, –binary 用binary的方式上传下载,不解释字符为 ascii -e, –escape 强制escape 所有控制字符,比如 Ctr ...

  7. C#DateTime与Unix时间戳的转换

    /// <summary> /// Unix时间戳转为C#格式时间 /// </summary> /// <param name="timeStamp" ...

  8. (转载)iis7下站点日志默认位置

    转自http://www.cnblogs.com/mincyw/p/3425468.html iis7下站点日志默认位置   在iis6时,通过iis管理器的日志配置可以找到站点日志存储的位置. 但是 ...

  9. Nginx 设置，设置已经解析的域名，在nginx中没有定义相应server时的默认访问

    https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80785027

  10. 自己定义View——坑、技巧、调优

    <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rg ...