只用CSS的轮播图？快来看一看！

最新推荐文章于 2023-04-10 20:55:27 发布
最新推荐文章于 2023-04-10 20:55:27 发布
阅读量672 收藏 28
点赞数 9
文章标签： css实现轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L333333333/article/details/101637980
版权

只用CSS的轮播图？快来看一看！

设计

在这里插入图片描述

  • 一个主容器+一个图形链；
  • 图像加分步动画实现轮播；
  • 鼠标移上去可暂停；
  • 显示当前图片页码；

写出html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css轮播</title>
</head>
<body>
	<!--轮播-->
	<div class="scroll-photo">
		<!--图片组-->
		<div class="photos">
			<img src="./photo/1.jpg" alt="">
			<img src="./photo/2.jpg" alt="">
			<img src="./photo/3.jpg" alt="">
			<img src="./photo/4.jpg" alt="">
		</div>
		<!--页码-->
		<div class="index">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</div>
</body>
</html>

加一些基本样式

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		width: 100vw;
		height: 100vh;
		background: #82ccdd;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	div.scroll-photo{
		position: absolute;
		width: 400px;
		height: 300px;
		overflow: hidden;
	}

	div.photos{
		position: absolute;
		width: 1600px;
		height: 300px;
		z-index: -1;
	}

	div.photos img{
		position: relative;
		width: 400px;
		height: 300px;
		float: left;
	}

	div.index ul{
		position: absolute;
		display: grid;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		list-style: none;
		width: 200px;
		grid-template: 1fr/repeat(4,1fr);
		justify-items: center;
	}

	div.index ul::after{
		content: '';
		position: absolute;
		top: 0;
		left: 12.5px;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		z-index: -1;
		background: #d63031;
	}

	div.index ul li{
		position: relative;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		color: #FFF;
		background: rgba(0,0,0,.5);
		display: grid;
		justify-content: center;
		align-items: center;
	}
</style>

现在的效果
在这里插入图片描述

让他们动起来

/**
 * 	滚动
 */
div.photos{
	animation:scroll 8s steps(4,end);
	animation-iteration-count: infinite;
}

div.index ul::after{
	animation:index-scroll 8s steps(4,end);
	animation-iteration-count: infinite;
}

@keyframes scroll{
	to{
		transform: translateX(-1600px);
	}
}

@keyframes index-scroll{
	to{
		transform: translateX(200px);
	}
}

现在的效果
在这里插入图片描述

鼠标悬停停止

/**
 * 鼠标悬停效果
 */
div.scroll-photo:hover div.photos,
div.scroll-photo:hover div.index ul::after{
	animation-play-state: paused;
}

成品代码和效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css轮播</title>
	<style type="text/css">
		/**
		 *	基本样式
		 */
		*{padding: 0;margin: 0;}
		body{
			width: 100vw;
			height: 100vh;
			background: #82ccdd;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		div.scroll-photo{
			position: absolute;
			width: 400px;
			height: 300px;
			overflow: hidden;
			cursor: pointer;
		}

		div.photos{
			position: absolute;
			width: 1600px;
			height: 300px;
			z-index: -1;
		}

		div.photos img{
			position: relative;
			width: 400px;
			height: 300px;
			float: left;
		}

		div.index ul{
			position: absolute;
			display: grid;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			list-style: none;
			width: 200px;
			grid-template: 1fr/repeat(4,1fr);
			justify-items: center;
		}

		div.index ul::after{
			content: '';
			position: absolute;
			top: 0;
			left: 12.5px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			z-index: -1;
			background: #d63031;
		}

		div.index ul li{
			position: relative;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			color: #FFF;
			background: rgba(0,0,0,.5);
			display: grid;
			justify-content: center;
			align-items: center;
		}

		/**
		 * 	滚动
		 */
		div.photos{
			animation:scroll 8s steps(4,end);
			animation-iteration-count: infinite;
		}

		div.index ul::after{
			animation:index-scroll 8s steps(4,end);
			animation-iteration-count: infinite;
		}

		@keyframes scroll{
			to{
				transform: translateX(-1600px);
			}
		}

		@keyframes index-scroll{
			to{
				transform: translateX(200px);
			}
		}

		/**
		 * 鼠标悬停效果
		 */
		div.scroll-photo:hover div.photos,
		div.scroll-photo:hover div.index ul::after{
			animation-play-state: paused;
		}
	</style>
</head>
<body>
	<!--轮播-->
	<div class="scroll-photo">
		<!--图片组-->
		<div class="photos">
			<img src="./photo/1.jpg" alt="">
			<img src="./photo/2.jpg" alt="">
			<img src="./photo/3.jpg" alt="">
			<img src="./photo/4.jpg" alt="">
		</div>
		<!--页码-->
		<div class="index">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</div>
</body>
</html>

成品效果（注：已经测试得知鼠标悬停功能不完美兼容火狐浏览器）：
在这里插入图片描述

本博客其他文章推荐

原生js获取css伪类元素并设置属性

模仿一个球落地效果，最终停在地面上（仿真效果，CSS实现）

让一个小球无限的弹弹弹~(CSS实现球无限弹动)

如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）

maven新手上路–创建webapp项目，引入jstl、el依赖及el不解析的问题解决（详细图文）

blankliu404
关注
  • 9
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端：纯css实现图片轮播（自动+手动）
daisy_juhua的博客
09-13 9422
图片轮播效果
纯 CSS 实现轮播图（自动切换、无缝衔接、小圆点切换）
qq_53569667的博客
12-30 1万+
纯 css 实现一个简单的轮播图
css 实现轮播图效果
蓝朽的小世界
04-06 6034
css实现轮播图效果
CSS入门篇15.轮播图的三种实现方法
m0_62404129的博客
08-30 5202
建一个对外的窗口，让图片整个横向排列，通过调整整个图片的水平方向，让图片叠在一起，通过改变图片的层级，来决定显示哪张图片。一、自己手写（配合js,目前的话，大家掌握原理和样式）二、用各种插件、或者框架（别人写的，你来用）1、用float为主。...
CSS3动画巧妙实现轮播图效果
alexei9的博客
04-10 1160
C3增加了很多新的内容，其中动画部分更是分担了js引擎的内容，今天小编来分享一种简单的轮播图制作方法。最外层的盒子作为展示框，内部的盒子作为轮播框，因此，外层盒子添加overflow属性隐藏溢出元素。动画定义完成之后就是调用动画，这里采用的spets属性，来保证轮播图的停顿感觉。接下来就是css部分了，首先我们需要搭建嵌套关系的盒子框架。首先搭建两个嵌套关系的盒子，盒子最内部放入轮播图素材。接下来就是动画部分了。
html+css3D轮播图片
01-29
3D轮播图是一种吸引用户注意力并展示多张图片的有效方式，常用于网站的首页或产品展示区域。 首先，我们需要在HTML中设置基本的结构。这通常包括一个容器元素（如`div`）来包含所有的图片，并为每张图片创建单独的`...
简单实现css轮播图
07-26
本资源提供了一个简单的CSS实现的轮播图，适合初学者理解和学习。下面我们将详细讲解如何利用HTML和CSS创建一个基本的轮播图。 首先，我们需要在HTML文件中设置轮播图的基础结构。通常，我们会用一个容器包裹所有的...
css轮播图片百叶窗切换
12-29
总结，CSS3的百叶窗轮播图切换效果是通过结合选择器、过渡、动画和变换等特性来实现的，它不仅可以增强网页的交互体验，也展示了CSS3的强大功能。通过理解和实践这个效果，开发者可以进一步提升自己的CSS技能，并在...
基于CSS3 animation动画属性实现轮播图效果
09-24
在本文中，我们将深入探讨如何利用CSS3的animation属性来实现轮播图效果，这是一种常见的网页元素，用于展示多张图片或内容的自动切换。 首先，我们需要了解animation属性的基本构成。animation属性是一个简写属性...
CSS3制作轮播图的一种方法
12-13
本教程将介绍一种利用CSS3实现轮播图的方法。 首先，我们需要理解CSS3中的关键概念，如选择器、布局方式、动画和过渡效果。在提供的代码中，可以看到以下主要的CSS样式： 1. **通用选择器 `*`**：用于设置所有元素...
纯css实现轮播图（自动轮播和手动轮播）效果_☆*往事随風*☆的博客
热门推荐
☆往事随風☆的博客
04-03 9万+
纯css实现轮播图效果 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录纯css实现轮播图效果一、前言二、基本思路三、实现步骤1.创建一个容器来进行轮播图的展示2.创建一个容器来存储图片3.在存储容器中放入图片4.为图片设置动画5.效果展示6.整体代码四、总结 一、前言 轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。 二、基本思路
CSS：纯CSS轮播图 轮播代码很详细后面的动画介绍不详细
xugenyin的博客
12-12 1956
轮播图并排排列，组成一张很宽的图片，而手机屏幕宽度是固定的，这样每过一段时间，我们把宽的图想做平移一些距离，一般是平移一个屏幕宽度，比如屏幕宽320px，就平移320px，这样就达到了切换图片的目的。 注意点，由于每次都平移一个手机宽度，即每张轮播图要适应手机的尺寸，所以UI在做图的时候要考虑这点，不然显示的图片很丑。
利用css来制作轮播图
m0_59246072的博客
03-26 5406
利用css来制作咱们的轮播图
HTML纯CSS3动画轮播图（详解）
weixin_42670775的博客
08-12 3万+
HTML纯CSS3动画轮播图（详解） 网页开发初学者学习时，一般都是先编写静态的页面，并没有JS、JQ等，在学习CSS3 时可以利用animation 属性制作一个简单的纯CSS3轮播图 基础知识 废话不多说，先来复习一下CSS的animation 属性： 属性 说明 animation-name 用来指定一个关键帧动画的名称，这个动画名必须对应一个@k...
css实现轮播图
qq_63730529的博客
07-23 4720
CSS+HTML创建轮播图
css系列----纯 css 实现轮播图(自动)
weixin_44160385的博客
03-20 4405
3、纯 css 实现轮播图(自动) 实现原理：利用 css3 中 动画和 overflow:hidden 实现 /* 容器大小 */ .container { height: 300px; width: 800px; overflow: hidden; } /* .wrap */ .wrap { position: relative; left: 0px; width: ...
纯css制作轮播图（自动）最最最最详细的教程
weixin_66084763的博客
04-02 5660
思路：1.先设置一个让图片显示在屏幕里的固定盒子 2.其次插入图片 使其横向排列 3.将超出固定盒子的图片隐藏住
只用css和html实现简单的图片轮播效果
贾教练的博客
04-23 2万+
用css和html实现简单的图片轮播效果 这是html的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css轮播</title> <link rel="stylesheet" href="轮播.css" type="...
怎么只用css达到这种效果
Little_xu的博客
11-15 92
我用下面6个超链接图片和另外6个超链接图片分两层次0 和1 1我设置鼠标放上去透明度为0 鼠标上去后下面原本隐藏的照片（也就是0）就会显示出来。 就是达到这种效果 求怎么弄 ...
css轮播图最后一帧接第一帧
最新发布
08-11
要实现CSS轮播图最后一帧接第一帧的效果，可以使用CSS动画和关键帧（@keyframes）来实现。下面是一个简单的示例代码： HTML部分： ```html ``` CSS部分： ```css .slider { width: 100%; height: 300px;...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值