轮播------位置轮播

最新推荐文章于 2021-11-14 10:21:27 发布

一头会飞的鱼

最新推荐文章于 2021-11-14 10:21:27 发布

阅读量421

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_36056828/article/details/79770360

版权

本文介绍了位置轮播法的工作原理，该方法适用于只有三个显示位置的轮播效果。通过左右拉动实现图片交换，当用户点击底部圆点时，根据点击位置判断执行右拉或左拉操作来更新显示。示例代码包括HTML和JS部分，展示了如何处理图片的切换逻辑。

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

位置轮播法: 只有三个位置供图片来回切换。其他的由于绝对定位被遮挡住了。

类似于上图，图片在1,2进行交换，在显示区域显示。

原理：

<---右拉步骤：老图拉到2，再把新图拉到1等待显示，新图再拉到显示区域。

--->左拉步骤：老图拉到1，再把新图拉到2等待，新图再拉到显示区域。

底部小圆点监听时：需要判断点击的圆点位置在当前图片的左边还是右边。

如果在左边就实现右拉的步骤，如果在右边就实现左拉的步骤。

html:

<div class="carousel" id="carousel">
		<div class="btns">
			<a href="javascript:;" class="leftBtn" id="leftBtn"></a>
			<a href="javascript:;" class="rightBtn" id="rightBtn"></a>
		</div>
		<div class="imageList" id="imageList">
			<ul>
				<li class="first"><a href