手撸一个简易版轮播图(上)

最新推荐文章于 2024-09-04 02:27:32 发布

heedjay

最新推荐文章于 2024-09-04 02:27:32 发布

阅读量408

点赞数

分类专栏： JavaScript-demo html css/css3 文章标签：定位 css html js

本文链接：https://blog.csdn.net/qq_42687264/article/details/104887394

版权

css/css3 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript-demo

4 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

手撸一个简易版轮播图

实现原理，通过控制 swiper-warpper 容器的定位来达到切换图片的效果。

页面布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简易版轮播图</title>
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<div class="container">
		<div class="swiper-container">
			<div class="swiper-warpper">
				<div class="swiper-item">
					<img src="./images/banner-01.jpg" alt="">
				</div>
				<div class="swiper-item">
					<img src="./images/banner-02.jpg" alt="">
				</div>
				<div class="swiper-item">
					<img src="./images/banner-03.jpg" alt="">
				</div>
			</div>
			<div class="control">
				<div class="prev-btn"><</div>
				<div class="next-btn">></div>
			</div>
		</div>
	</div>
	<script src="./index.js"></script>
</body>
</html>

页面样式

.container{
	width: 600px;
	margin: 100px auto 0;
}
.swiper-container{
	position: relative;
	margin: 0 auto;
	width: 520px;
	height: 280px;
	/* 这里先把超出隐藏注释 方便查看布局效果 */
	/*overflow: hidden;*/
}
.swiper-container .swiper-warpper{
	position: absolute;
	left: 0;
	top: 0;
	width: 1560px;
	height: 280px;
}
.swiper-container .swiper-warpper .swiper-item{
	float: left;
}
.swiper-container .control{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
}
.swiper-container .control .prev-btn,.swiper-container .control .next-btn{
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 24px;
	color: #000;
	text-align: center;
	background-color: rgba(0,0,0,.3);
}

布局说明

swiper-container主要包裹整个轮播图布局：固定宽高，相对定位，溢出隐藏；
swiper-warpper主要包裹图片（banner）: 宽度为所有图片宽度加起来的和，高度等于父级高度，重点是相对定位，因为轮播效果就是通过控制 swiper-warpper 的 left 属性的值来控制的；
.swiper-item 主要包裹图片：宽高度等于 swiper-container 的宽高，通过设置 float 等于 left 来让图片从左到右排列（也可以通过控制swiper-warpper 的 display 等于 flex 来实现）；
把上一张和下一站按钮通过定位的方式固定到左边/右边；

直接通过调试工具改变 swiper-warpper 的 left 属性值，可以查看具体的效果：
在这里插入图片描述
下一篇我们一起来看看如何通过JavaScript来控制切换上一张或下一张。

heedjay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手撸一个简易版轮播图(上)

手撸一个简易版轮播图实现原理，通过控制 swiper-warpper 容器的定位来达到切换图片的效果。页面布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简易版轮播图</title> <link rel="st...
复制链接

扫一扫

专栏目录