JS-学习笔记：原生JS实现轮播图

最新推荐文章于 2021-09-14 19:55:41 发布

原创最新推荐文章于 2021-09-14 19:55:41 发布 · 置顶 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #javas #轮播图

原生JS小案例专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript实现的轮播图特效方法，并提供了详细的HTML和CSS样式代码。该方法通过定时器控制图片滚动展示，适用于网页设计中图片展示的需求。

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

javascript代码：

		<script>
			window.onload=function(){
				//获取到卷轴
				var wrap=document.getElementById('wrap');
				
				//使用定时器每个若干秒修改一次卷轴位置
				setInterval(function(){
					//如果当前left值已经展现到最后一张，则回到第一张图片
					if(wrap.offsetLeft<=-2400){
						wrap.style.left='-600px';    //避免第一张,没有过度效果,直接从第二张图开始
					}else{
					wrap.style.left=wrap.offsetLeft-600+'px'
				}
					},2000);

				
			}
		</script>

html代码：

</html>
<style>	
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
			#viewPort{
				margin: 0 auto;     
				width: 600px;
				height: 400px;
				border: 3px solid darkorange;
				overflow: hidden;    /* 图片溢出隐藏*/
				position: relative;  /*相对定位*/
				
			
			}
			#wrap{
				width:3000px; 
				height:400px;
				position: absolute;
				transition: all 1s;  /*过度效果*/
				
				-ms-transform: all 1s;   /*让IE兼容*/
			}
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="viewPort">
			<div id="wrap">
				<!--要展现的图片-->
				<img src="imagse/1.jpg" alt="美女1" class="img"/>
				<img src="imagse/1.jpg" alt="美女1" class="img"/>  <!--插入两张图，避免浏览器兼容性-->
				<img src="imagse/2.jpg" alt="美女1" class="img"/>
				<img src="imagse/3.jpg" alt="美女1" class="img"/>
				<img src="imagse/4.jpg" alt="美女1" class="img"/>
			</div>
		</div>
	</body>
</html>