html使用javascript实现图片滚动无缝拼接

最新推荐文章于 2025-06-23 07:02:02 发布

原创最新推荐文章于 2025-06-23 07:02:02 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片滚动无缝拼接</title>
<style type="text/css">
	*{
		margin: 0;padding: 0;
	}
	#oUl{
		list-style: none;
		width: 730px;
		position: absolute;
		left: 0px;
		top:0px;
	}
	#container{
		text-align: center;
		
	}
	#views{
		margin: 0 auto;
		width: 410px;
		height: 108px;
		border: 2px solid red;
		position: relative;
		top: 100px;
		overflow: hidden;
		
	}
	#oUl li{
		float: left;
	}

</style>
<script type="text/javascript">

	var oUl;
	window.onload=function(){
		oUl = document.getElementById("oUl");
		var oLis = document.getElementsByTagName("li");
		
		oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
		
	
		oUl.style.width=oLis[0].offsetWidth*oLis.length+"px";
		id = setInterval("fun()", 10);
		for (var i = 0; i < oLis.length; i++) {
			oLis[i].onmouseover=function(){
				clearInterval(id)
			}
			oLis[i].onmouseout=function(){
				id = setInterval("fun()", 10);
			}
		}
	}
	function fun(){
		if((-oUl.offsetWidth/2)==oUl.offsetLeft){
			oUl.style.left='0px';
		}
		oUl.style.left=(oUl.offsetLeft-2)+'px';
	}
</script>
</head>
<body>

	<div id ="container">
		<div id="views">
			<ul id="oUl" >
				<li >
					<a><img alt="" src="img/1.jpg"></a>
				</li>
				<li>
					<a><img alt="" src="img/2.jpg"></a>
				</li>
				<li>
					<a><img alt="" src="img/3.jpg"></a>
				</li>
				<li>
					<a><img alt="" src="img/4.jpg"></a>
				</li>
			</ul>
		</div>
	</div>
	
</body>
</html>

html5实现滚动文字

	<div class="custom-notice">
   		<marquee class="noticeText ng-binding" direction="left" behavior="alternate" scrollamount="100" scrolldelay="1000" loop="5" width="100%" onmouseover="this.stop();" onmouseout="this.start();"  style="width: 100%;">helloworld</marquee>
	</div>

1.滚动方向属性 direction

该属性的滚动方向可以设置四个值:up（文字向上）、down（文字向下）、left（文字向左）、right（文字向右）。

2.滚动方式属性 behavior

该属性的取值有三个值：scroll（循环滚动，默认效果）、slide(只滚动一次就停止)、alternate(来回交替进行滚动)

3.滚动速度属性 scrollamount

该属性能调整文字滚动的速度，滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的，以像素为单位。值只写数字，不带px单位，若带了单位则设置无效。

4.滚动延迟属性 scrolldelay

该属性用来设置滚动文字滚动的时间间隔（滚动两步之间的时间间隔）。

scrolldelay的时间间隔单位是毫秒，取值只写数字

5.滚动循环属性 loop

设置滚动文字后，默认会无限循环下去，若想控制循环的次数，可设置此属性。

6.滚动范围属性 width&height

若想控制文字滚动的范围，则可起用这二属性，以像素为单位，不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽，搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。

7.滚动背景颜色属性 bgcolor

此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)。

8.滚动空间属性 hspace&vspace

hsapce属性可以设置滚动范围的水平位置，vspace用来设置滚动范围的垂直位置。单位均为像素，写值时不写单位px。