轮播图实现方法一——层叠轮播图

最新推荐文章于 2024-01-10 10:50:09 发布

weixin_44592912

最新推荐文章于 2024-01-10 10:50:09 发布

阅读量5.2k

点赞数 1

分类专栏： JavaScrept 轮播图

本文链接：https://blog.csdn.net/weixin_44592912/article/details/106895574

版权

本文介绍了层叠轮播图的实现原理，通过将所有轮播图片置于同一层并利用JavaScript控制显示顺序，达到轮播效果。详细阐述了HTML、CSS和JS的具体实现方法。

摘要由CSDN通过智能技术生成

轮播图的实现方法有很多种，在此主要介绍一种层叠轮播图的实现方式
主要原理：将所有轮播图照片放在同一层，相互覆盖，通过JS控制当前那一张活跃在最顶端，实现图片轮播。

具体实现如下：

HTML部分

<!--轮播图可视区-->
<div class="warp" id="main">
	<!--轮播图列表-->        
	<ul class="list">            
		<li class="list-item active">0</li>            
		<li class="list-item">1</li>            
		<li class="list-item">2</li>            
		<li class="list-item">3</li>            
		<li class="list-item">4</li>        
	</ul>
	<!--上一张下一张切换-->        
	<button class="btn" id="goPre">< </button>        
	<button class="btn" id="goNext">></button>        
	<ul id="point-list">           
		 <li class="point active