手撸一个简易版轮播图

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

页面布局

简易版轮播图

<

>

页面样式

.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 来实现)；
4. 把上一张和下一站按钮通过定位的方式固定到左边/右边；

直接通过调试工具改变 swiper-warpper 的 left 属性值，可以查看具体的效果：

改变 swiper-warpper 的 left 属性值截图

下一篇我们一起来看看如何通过JavaScript来控制切换上一张或下一张。

javascript实现图片轮播_手撸一个简易版轮播图(上)相关推荐

10分钟手把手教你用Android手撸一个简易的个人记账App
用Android手撸一个简易的个人记账系统 ⛱️序言
用go语言撸一个简易版的区块链
用go撸一个简易版的区块链引言这个最初的版本时多年以前学习go的时候,自己撸的一个简易版本的区块链.不过麻雀虽小,五脏俱全.通过这个代码你了解区块链内部的大概运行机制时没有问题的. 比特币底层区块 ...
肝一波 ~ 手写一个简易版的Mybatis，带你深入领略它的魅力！
零.准备工作 <dependencies><dependency><groupId>mysql</groupId><artifactId>m ...
java实现物体下落效果_手撸一个物体下落的控件，实现雪花飘落效果
效果图: 圣诞登录页.gif 参考文章: Android自定义View--从零开始实现雪花飘落效果感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化.笔者参考原文作者的源码,做了一点修改,实 ...
glide默认的缓存图片路径地址_手写一个静态资源中间件，加深了解服务器对文件请求的缓存策略...
上一篇文章<详解页面静态资源的缓存策略,搞懂强缓存和协商缓存再做性能优化>我们从理论上介绍了浏览器和服务器是如何对静态资源做缓存的,这篇文章我们把它做成一个node服务器的静态资源中间件. ...
手撸一个网页版看板(仿照板栗看板样式)
方案 vue+vuedraggable+Sortable+自定义css+elementui 业务繁琐后海量配置或者其他场景需要,仿照板栗看板写一个简单的网页版,这里贴出大概贴出部分代码 1.列表拖动插 ...
来，一起手撸一个简版 Redis（附源码）
点击上方视学算法,选择设为星标优质文章,及时送达作者 | 凯京技术团队来自 | my.oschina.net/keking/blog/3037372 今天主要介绍两个开源项目,然后创建应用最 ...
手撸一个springsecurity，了解一下security原理
今天手撸一个简易版本的springsecurity,带大家理解下springsecurity的原理.转载自:www.javaman.cn 手撸一个springsecurity,了解一下security ...
手写一个简易版本的RPC
前言在1024程序员节前夕,学习技术是对节日最好的庆祝. 手写一个简易版的RPC,可以把模糊抽象的概念具像化,属于落地层面了. 1. RPC基本原理 RPC原理 2. 四个版本的迭代注:api表示 ...

javascript实现图片轮播_手撸一个简易版轮播图(上)

手撸一个简易版轮播图

页面布局

页面样式

javascript实现图片轮播_手撸一个简易版轮播图(上)相关推荐

最新文章

热门文章