源代码下载：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. 启动Tomcat，startup.bat一闪而过的解决办法

    1.打开命令行:win+R --> cmd2.将解压后的tomcat\bin\startup.bat文件拖到控制台窗口中,回车. 这样就可以看到错误信息的提示,根据提示修改即可.

  2. 1.2 Python基础知识 - 字符编码

    计算机中的数据是以二进制方式进行存储的,即只有"0"和"1",二进制是属于数据类型的数据,它只可以和其他进制的数据类型进行转换,但是不能存储其他字符,例如:字母 ...

  3. python3 求斐波那契数列（Fibonacci sequence）

    输出斐波那契数列的前多少个数. 利用函数 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan # ----斐波那契数列( ...

  4. cordova android

    Image.png Image.png http://www.jscss.cc/2016/10/18/cordova.html 装一个全局的cordova: 官网介绍:http://cordova.a ...

  5. Linux下设置MySQL不区分大写和小写

            MySQL在Linux下数据库名.表名.列名.别名大写和小写规则:  1.数据库名与表名是严格区分大写和小写  2.表的别名是严格区分大写和小写  3.列名与列的别名在全部的情况下均是 ...

  6. 飞镖忍者 quick-cocos2d-x3.2

    经典的入门小游戏.这里用quick-cocos2d-x3.2又一次写一遍,以便熟悉下quick 首先,创建project,假设不会自行百度啊. 1.编译效果例如以下: watermark/2/text ...

  7. css3-13 css3的3D动画如何实现

    css3-13 css3的3D动画如何实现 一.总结 一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...

  8. JAVA 日志库3

        Commons Logging和SLF4J都是基于相同的设计,即从一个LogFactory中取得一个命名的Log(Logger)实例,然后使用这个Log(Logger)实例打印debug.in ...

  9. python画最最简单的折线图

    # encoding=utf-8import matplotlib.pyplot as pltfrom pylab import * #支持中文mpl.rcParams['font.sans-seri ...

  10. SpringCloud微服务学习笔记

    SpringCloud微服务学习笔记 项目地址: https://github.com/taoweidong/Micro-service-learning 单体架构(Monolithic架构) Mon ...