Html笔记——实现一组图片循环且首尾相连的滚动效果

最新推荐文章于 2024-05-13 01:07:15 发布

PettyKoKo

最新推荐文章于 2024-05-13 01:07:15 发布

阅读量4w

点赞数 17

分类专栏：【前端】文章标签： html javascript

本文链接：https://blog.csdn.net/qq_31028891/article/details/53015651

版权

【前端】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

设计思想：在一个Div内存放两个相同内容（使用一行多列表格）作为一个滚动对象，并将超出的宽度的内容隐藏，在JS脚本中定义Div向移动的方法（水平坐标加1）。当第一个内容完全消失（即Div向左移动的距离达到该Div的宽度，此时第二个内容完全显示)时，将滚动条的坐标复位，开始新的一轮。

代码如下：

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>一组图片循环且首尾相连的滚动效果</title>
	<style>
	#bg{
		width:940px;height:300px;
		background：url(images/精品展示.jpg);
		}
	#sm{/*滚动对象样式*/
		overflow:hidden;/*隐藏Div中多余的内容，增加图片会一起滚动*/
		width:920px;height:280px;
		margin:0 auto;
		padding-top:30px;
		}
	</style>
</head>
<body>
<center>
	<div id="bg">
		<div id="sm">	<!--滚动div-->
				<table>		<!--外表格1x2,且第2单元格是空的-->
					<tr>
						<td id="Pic1">
							<table>	<!--内表格1x9,存放9张图片-->
								<tr>
									<td><img src="images/1.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/2.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/3.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/4.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/5.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/6.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/7.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/8.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
									<td><img src="images/9.jpg" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
							    </tr>
						   </table>
					   </td>
					<td id="Pic2"></td>
				    </tr>
				</table>
		</div>
	</div>
</center>

<!--下面内容的客户端脚本不可放置在页面头部-->

<script>
	Pic2.innerHTML=Pic1.innerHTML;//复制一组图片，但被隐藏
	function scrolltoleft(){//定义向左移动的方法
		sm.scrollLeft++;//改变层的水平坐标，实现向左移动
		if(sm.scrollLeft>=Pic1.scrollWidth)//需要复位
			sm.scrollLeft=0;//层的位置复位，浏览器窗口的宽度有限的
	}
	
	var MyMar=setInterval(scrolltoleft,40); //定时器，方法名后不可加()
	
	function mouseover(x){//放大图片
		x.style.width="210";
		x.style.height="256"
		x.style.cursor="pointer"
	}
	function mouseout(x){//图片复原
		x.style.width="105";
		x.style.height="128"
	}

	//两面两行是用方法响应对象的事件
	sm.onmouseover=function(){//匿名方法（函数）
		clearInterval(MyMar);//停止滚动
	}
	
	sm.onmouseout=function(){
		MyMar = setInterval(scrolltoleft,40);//继续滚动
	}
	

</script>							
</body>
</html>

页面浏览效果图：

PettyKoKo

关注

17
点赞
踩
97

收藏

觉得还不错? 一键收藏
7
评论
Html笔记——实现一组图片循环且首尾相连的滚动效果

设计思想：在一个Div内存放两个相同内容（使用一行多列表格）作为一个滚动对象，并将超出的宽度的内容隐藏，在JS脚本中定义Div向移动的方法（水平坐标加1）。当第一个内容完全消失（即Div向左移动的距离达到该Div的宽度，此时第二个内容完全显示)时，将滚动条的坐标复位，开始新的一轮。代码如下：<html><head> <meta http-equiv="C...
复制链接

扫一扫