横向滚动公告html + css + js_横向滚动公告代码-优快云博客

本文链接：https://blog.youkuaiyun.com/jasonbrooke_/article/details/7885121

本文详细介绍了如何使用HTML、CSS和JavaScript实现网页的动态布局及图片轮播功能，包括左右滑动切换图片、鼠标悬停暂停效果及事件监听机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前台布局

<div id="demo" style="float:left;OVERFLOW:hidden; WIDTH: 240px;">' +
'<table cellpadding="0" align="left" border="0" cellspace="0" style="width:480px;">' +
	'<tr>' +
		'<td id="demo1" valign="top" style="width:240px;">' +
			'<table cellspacing="0" cellpadding="0" border="0">' +
				'<tr id="demo1_tr" align="center">' +
					'<td style="padding:0 10px 0 10px;">系统暂无公告！</td>' +
					'</tr>' +
			'</table>' +
		'</td>' +
		'<td id="demo2" valign="top" style="width:240px;"></td>' +
	'</tr>' +
'</table>' +
'</div>' +

2. javascript

	var speed1 = 0;
	//图片左移的速度
	var MyMar1;
	//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
	var MyMar2;
	//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
	var lefthit = 0;
	//记录左移按钮点击次数
	var righthit = 0;
	记录右移按钮点击次数
	//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
	function clearleft() {
		clearInterval(MyMar1);
		clearInterval(MyMar2);
	}
	//图片左移的方法
	function toleft() {
		//判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
		if (lefthit == 0) {
			speed1 = 30;//图片左移速度时间毫秒
			//让的内容demo2与demo1内容一样
			document.getElementById("demo2").innerHTML = document
					.getElementById("demo1").innerHTML;
			//上行图片移动的方法
			function Marquee1() {
				//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
				if (document.getElementById("demo2").offsetWidth
						- document.getElementById("demo").scrollLeft <= 0) {
					//demo跳回初始位置
					document.getElementById("demo").scrollLeft -= document
							.getElementById("demo1").offsetWidth;
				} else {
					//demo开始重新移动
					document.getElementById("demo").scrollLeft++;
				}
			}
			//setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
			MyMar1 = setInterval(Marquee1, speed1);
			//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
			document.getElementById("demo").onmouseover = function() {
				clearInterval(MyMar1);
				clearInterval(MyMar2);
			};
			//当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
			document.getElementById("demo").onmouseout = function() {
				MyMar1 = setInterval(Marquee1, speed1);
				clearInterval(MyMar2);
			};
			lefthit = 1; //设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
			righthit = 0; //把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
		}
	}