zoukankan      html  css  js  c++  java
  • JavaScript实现简单图片滚动 --9张图告诉你,C罗欲哭无泪

    源代码下载: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
    		{
    			 150px;
    			height: 150px;
    		}
    		.news_root
    		{
    			 225px;
    			height: 134px;
    			text-align: left;
    			margin: 0 auto;
    		}
    		div .news_header
    		{
    			 243px;
    			height: 16px;
    			vertical-align: top;
    			text-align: left;
    			font-size: 14px;
    			padding: 6px;
    		}
    		#scrollContainer
    		{
    			 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>


  • 相关阅读:
    关于js计算非等宽字体宽度的方法
    [NodeJs系列]聊一聊BOM
    Vue.js路由管理器 Vue Router
    vue 实践技巧合集
    微任务、宏任务与Event-Loop
    事件循环(EventLoop)的学习总结
    Cookie、Session和LocalStorage
    MySQL 树形结构 根据指定节点 获取其所在全路径节点序列
    MySQL 树形结构 根据指定节点 获取其所有父节点序列
    MySQL 创建函数报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creators
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/7289664.html
Copyright © 2011-2022 走看看