HTML 用JS写实现图片轮播

最新推荐文章于 2024-03-27 17:21:36 发布

菇毒

最新推荐文章于 2024-03-27 17:21:36 发布

阅读量2.4k

点赞数

分类专栏： web 前端学习文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43960383/article/details/121486627

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

用JS实现一组图片循环且首尾相连的滚动效果

1. 定义边框
2. 定义方法
全部代码如下

1. 定义边框

#bg{
			width: 940px;height: 158px;
			margin-left: auto;margin-right: auto;
		}
		#sm{
			overflow: hidden;
			width: 920px;height: 128px;
			margin: 0 auto;
			 padding-top: 30px;
		}

2. 定义方法

<script type="text/javascript">
	Pic2.innerHTML=Pic1.innerHTML;
	function scrolltoleft(){
		// sm.scrolltoleft()+"px";
		sm.scrollLeft++;
		 
		// if(sm.scrollLeft>=Pic1.scrollWidth)
		// sm.scrollLeft=0;
		if(sm.scrolltoTop>=Pic1.scrollHeight)
		sm.scrolltoTop=0;
		}
		var ar=setInterval(scrolltoleft,40);
			sm.onmouseover=function(){
			clearInterval(ar);
			}
			// sm.οnmοuseοver=function(){
			// 	ar=setInterval(scrolltoleft,40);
			// }
			sm.onmouseout=function(){
				ar=setInterval(scrolltoleft,40);
			}
		</script>

全部代码如下


<!DOCTYPE >
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>一组图片循环且首尾相连的滚动效果</title>
		<style type="text/css">
			#bg{
				width: 940px;height: 158px;
				margin-left: auto;margin-right: auto;
			}
			#sm{
				overflow: hidden;
				width: 920px;height: 128px;
				margin: 0 auto;
				 padding-top: 30px;
			}
			}
		</style>			
	</head>
	<body>
		<div id="bg">
			<div id="sm">
				<table >
					<tr>
						<td id="Pic1">
							<table>
								<tr>
									<td><img src="image/01.png" ></td>
									<td><img src="image/02.png" ></td>
									<td><img src="image/03.png" ></td>
									<td><img src="image/04.png" ></td>
									<td><img src="image/05.png"></td>
									<td><img src="image/06.png" ></td>
									<td><img src="image/07.png" ></td>
									<td><img src="image/08.png" ></td>
									<td><img src="image/09.png" ></td></tr></table></td>
						<td id="Pic2"></td></tr></table></div></div>	
							
	</body>	
</html>
<script type="text/javascript">		/*脚本*/
	Pic2.innerHTML=Pic1.innerHTML;
	function scrolltoleft(){
		// sm.scrolltoleft()+"px";
		sm.scrollLeft++;
		 
		// if(sm.scrollLeft>=Pic1.scrollWidth)
		// sm.scrollLeft=0;
		if(sm.scrolltoTop>=Pic1.scrollHeight)
		sm.scrolltoTop=0;
		}
		var ar=setInterval(scrolltoleft,40);
			sm.onmouseover=function(){
			clearInterval(ar);
			}
			// sm.οnmοuseοver=function(){
			// 	ar=setInterval(scrolltoleft,40);
			// }
			sm.onmouseout=function(){
				ar=setInterval(scrolltoleft,40);
			}
		</script>

只想效果如下所示：

用JS写轮播图

菇毒

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
HTML 用JS写实现图片轮播

用JS实现一组图片循环且首尾相连的滚动效果<!DOCTYPE ><!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>一组图片循环且首尾相连的滚动效果</title> <styl
复制链接

扫一扫