用flex布局实现图片轮播

前言：今天学了flex布局，感觉比起浮动实现图片轮播要好一点，因为flex的弹性容器没有脱标，可放在页面中的任意位置，省去了清除浮动的麻烦。

话不多说，先看效果：

以下是实现步骤：

第一步：确定要展示内容的窗口大小（这里我有八张内容，但是让窗口只展示四张）

效果图：

第二步：复制前四张图片放在主体图片的后面，并且设置ul为flex布局，同时设置ul的宽为12(8+4)张图片的宽度，顺便固定图片的宽高。（这一步的意义在于：让ul里的图片水平排列，且主体图片超出盒子后有替换的图片可以填上，营造一种无限轮播的错觉）

效果图：

第三步：给li设置flex布局，让图片和文字居中，同时定义向左轮播的动画

效果图：

第四步：给盒子设置溢出隐藏，然后设置鼠标悬停让动画停下，同时给li添加一点鼠标悬停的效果

效果图：

最后附上代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/demo.css"><title>商品跑马灯轮播</title>
</head><body><div class="lunbo"><ul><!-- 先准备8个li，用于存放主要图片，a标签用于点击跳转 --><li><a href=""><img src="./uploads/clothes_goods_1.jpg" alt="">   <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>   </a></li><li><a href="">  <img src="./uploads/clothes_goods_2.jpg" alt="">    <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>     </a></li><li><a href="">    <img src="./uploads/clothes_goods_3.jpg" alt="">    <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>    </a></li><li><a href=""> <img src="./uploads/clothes_goods_4.jpg" alt="">    <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>   </a></li><li><a href="">      <img src="./uploads/clothes_goods_5.jpg" alt="">  <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p> </a></li><li><a href="">    <img src="./uploads/clothes_goods_6.jpg" alt="">     <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>   </a></li><li><a href="">     <img src="./uploads/clothes_goods_7.jpg" alt="">   <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>     </a></li><li><a href="">   <img src="./uploads/clothes_goods_8.jpg" alt=""><h4>我是商品图片的标题</h4><p>我是商品图片的描述</p> </a></li>    <!-- 准备前四个相同的li，用于备用造成视觉差，填补轮播的空隙 --><li><a href="">      <img src="./uploads/clothes_goods_1.jpg" alt="">      <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>   </a></li><li><a href="">        <img src="./uploads/clothes_goods_2.jpg" alt="">             <h4>我是商品图片的标题</h4><p>我是商品图片的描述</p>      </a></li><li><a href="">         <img src="./uploads/clothes_goods_3.jpg" alt=""><h4>我是商品图片的标题</h4><p>我是商品图片的描述</p></a></li><li><a href=""><img src="./uploads/clothes_goods_4.jpg" alt=""><h4>我是商品图片的标题</h4><p>我是商品图片的描述</p></a></li></ul></div>
</body>
</html>

*{margin: 0;padding: 0;box-sizing: border-box;
}ul,
li{list-style: none;
}a{text-decoration: none;
}.lunbo{/* 设置图片溢出隐藏 */overflow: hidden;width: 800px;height: 300px;border: 2px solid #000;margin: 200px auto;
}.lunbo ul{display: flex;width: 2400px;height: 100%;border: 2px solid red;/* 注意是给ul设置动画，让整个模块跟着一起动 */animation: left_move 3s linear infinite;/* 让动画的状态为播放状态 不设置也行，因为是默认状态 */animation-play-state: running;
}
.lunbo ul:hover{/* 让鼠标悬停时动画暂停 */animation-play-state: paused;
}
.lunbo ul li{/* 让li变为弹性布局 */display: flex;/* flex-shrink默认值是1，即子元素的大小（数量）超过父盒子的宽高时，会自动缩小子元素的宽高。设置成0，就是不缩小，保持子元素的宽度。 */flex-shrink: 1;/* 主轴上的水平居中 */justify-content: center;/* 主轴上的垂直居中 */align-items: center;width: 200px;height: 100%;border: 1px solid skyblue;
}
.lunbo ul li:hover{box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);transform: scale(1.05);
}
.lunbo ul li img{width: 150px;height: 200px;
}@keyframes left_move {to{/* 这里偏移的应该是8个盒子的长度，留下四个相同的盒子补上空缺造成视觉差 */transform: translateX(-1600px);}
}

用flex布局实现图片轮播相关推荐

响应式banner图片轮播布局代码
响应式banner图片轮播布局代码基于jQuery制作企业家具网站首页banner响应式图片轮播,支持带左右按钮控制图片淡出淡现切换效果.手机自适应屏幕大小.修改:添加json动态数据轮播图片. 演 ...
android banner加载布局,Android知识点之图片轮播控件Banner
Rate this post 在我们来发Android项目时,经常有图片或者广告的轮播功能的需求,下面将介绍一款Android开发时使用的开源图片轮播控件Banner,同时按序讲解如何使用配置这款控件 ...
javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
造轮子之图片轮播组件(swiper)
图片轮播是种很常见的场景和功能,一般移动网站首页的轮播 banner,商品详情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的,所以遇到这种场景,一般都遵循以下三步: ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
前端学习之路之图片轮播(已实现自动轮播)
前端学习之路之图片轮播近期学习了不少的前端知识和前端的一些应用,今天呢就实现了一下图片的轮播效果,话不多说. 图片轮播的本质就是类似走马灯,当用户点击指示器的时候,需要轮播的图片发生偏移就行了. 使 ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
Android 使用ViewPager 做的半吊子的图片轮播
Android 使用ViewPager 做的半吊子的图片轮播效果图虽然不咋样,但是最起码的功能是实现了,下面我们来一步步的实现它. 界面下面我们来分析一下界面的构成整体的布局: 因为我们要做出 ...

用flex布局实现图片轮播

第一步：确定要展示内容的窗口大小（这里我有八张内容，但是让窗口只展示四张）

第三步：给li设置flex布局，让图片和文字居中，同时定义向左轮播的动画

第四步：给盒子设置溢出隐藏，然后设置鼠标悬停让动画停下，同时给li添加一点鼠标悬停的效果

用flex布局实现图片轮播相关推荐

最新文章

热门文章