只用css和html实现简单的图片轮播效果

最新推荐文章于 2024-03-18 23:11:45 发布
最新推荐文章于 2024-03-18 23:11:45 发布
阅读量2.4w 收藏 339
点赞数 42
分类专栏： 前端和LayUI 文章标签： css 图片轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43976890/article/details/89473101
版权

用css和html实现简单的图片轮播效果

三种方式：
1.直接变换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css动画</title>
	<style>
		.one {
			width: 400px;
			height: 300px;
			animation-name: move;
			animation-duration: 10s;
			animation-iteration-count: infinite;
		}
		@keyframes move {
			0% {
				background-image: url("./image/1.jpg");
				background-size: cover;
			}
			20% {
				
				background-image: url("./image/2.jpg");
				background-size: cover;
			}
			40% {
				
				background-image: url("./image/5.jpg");
				background-size: cover;
			}
			60% {
				
				background-image: url("./image/4.jpg");
				background-size: cover;
			}
			80% {
			
				background-image: url("./image/6.jpg");
					background-size: cover;
			}
			100% {
				
				background-image: url("./image/1.jpg");
				background-size: cover;
			}
		}
	</style>
</head>
<body>
	<div class="one">
		
	</div>
</body>
</html>

2.滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css实现轮播效果</title>
	<style type="text/css">
		.one {
			position: absolute;
			width: 500px;
			height: 400px;
			overflow: hidden;
		}
		.one_cantent img {
			width: 500px;
			height: 300px;
			float: left;
		}
		.one_cantent {
			width: 2500px;
			height: 400px;
			position: absolute;
			left: 0px;
			animation-name: move;
			animation-duration: 10s;
			animation-iteration-count: infinite;
		}
		@keyframes move {
			0% {
				left: 0px;
			}
			25% {
				left: -500px;
			}
			50% {
				left: -1000px;
			}
			75% {
				left: -1500px;
			}
			100% {
				left: -2000px
			}
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="one_cantent">
			<img src="./image/0.jpg">
			<img src="./image/1.jpg">
			<img src="./image/2.jpg">
			<img src="./image/3.jpg">
			<img src="./image/4.jpg">
		</div>
	</div>
</body>
</html>

3.渐变效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播</title>
	<style>
		*{
	margin: 0;
	padding: 0;
}
.one img{
	position: absolute;
	width: 400px;
	height:200px;
}
.two img{
	position: absolute;
	width: 400px;
	height: 200px;
}
.three img{
	position: absolute;
	width: 400px;
	height:200px;
}
.three {
	animation-name: cantoons;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.two {
	animation-name: cantoons2;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.one {
	animation-name: cantoons1;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
@keyframes cantoons{
	0% {
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	
}
@keyframes cantoons2{
	0% {
		opacity: 0;
	}
	35% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 0;

	}
}
@keyframes cantoons1{
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;

	}
}
	</style>
	
</head>
<body>
	<div class="one">
		<img src="./image/1.jpg" alt="">
	</div>
	<div class="two">
		<img src="./image/2.jpg" alt="">	
	</div>
	<div class="three">
		<img src="./image/3.jpg" alt="">	
	</div>
	
</body>
</html>

源码连接提取码：uaix

AsianPangolin
关注
  • 42
    点赞
  • 踩
  • 339
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
html图片轮播15个自动,15个超强的jQuery/HTML5图片轮播插件
weixin_30091863的博客
05-30 1512
最近咱们为你们分享过很多基于jQuery的图片轮播插件，固然也有不少使用了HTML5和CSS3的相关技术，让整个图片播放器显得更加美观，动画效果显得更加炫酷。此次咱们特地为你们筛选了一些最新的jQuery/HTML5图片轮播插件，每个的功能都比较强大，固然可能不是每个都适合你，但你也能够从中学到很多用jQuery和HTML5编写图片轮播插件的知识。下面咱们一块儿来看看这15个强大的图片播放器吧。c...
html中轮播图的做法及源码
最新发布
2301_80899969的博客
06-01 480
通过css样式来进行布局，让图片重复堆叠在同一块区域内通过opacity来调整透明度来进行显示，后面则主要通过javascript央视来进行调整，并实现其动态效果，前面通过其css样式中的绝对定位和相对定位来进行图片整体布局上的实现，同时通过一些特殊的样式如opacity，radius，nth-child等一系列的标签来实现其细节上的处理，用一句话来形容莫过于绝对定位和相对定位决定其大致框架，而一系列的特殊样式择决定了起细节，使其变得更加形象与生动，而js则主要起了动态处理的作用。
html css 图片自动轮播
wgq2020的博客
09-30 3686
以上代码可以实现基本的轮播，可根据需要进行修改和扩展。
【博主推荐】html好看的图片轮播多种风格（源码）
xcLeigh
07-18 1万+
html好看的图片轮播，支持各种配置，html设计自定义图片轮播，html图片轮播，好看的图片轮播效果，html图片轮播带源码。
HTML自动轮播图
入门小编程
09-20 3963
【代码】HTML自动轮播图。
html滚动轮播图片代码,html 无缝轮播图完整代码
weixin_42365688的博客
06-04 4143
轮播图无缝滚动*{padding:0;margin:0;list-style:none;border:0;}.all{width:500px;height:200px;padding:7px;border:1px solid #ccc;margin:100px auto;position:relative;}.screen{width:500px;height:200px;overflow:hid...
HTML+CSS+JavaScript实现轮播图
weixin_43396749的博客
11-24 2772
HTML+CSS+JavaScript实现轮播图
jquery+css实现简单的图片轮播效果
10-19
本文将详细讲解如何使用jQuery和CSS实现一个简单的图片轮播效果。首先，我们需要理解基本的HTML结构、CSS样式和jQuery脚本的工作原理。 HTML结构是实现轮播的基础。在示例代码中，我们看到一个包含多个`<img>`标签...
原生js和css实现图片轮播效果
10-20
在本文中，我们将探讨如何使用原生JavaScript和CSS来实现一个简单的图片轮播效果。首先，我们来看HTML结构，它包含四个图片元素（实际上是四个带有不同背景颜色的div），每个代表一张图片。这些图片被放置在一个具有...
纯CSS3实现图片无间断轮播效果
09-27
图片轮播效果在各大网站都能用到，本文给大家分享通过纯css3制作轮播效果图的思路，感兴趣的朋友一起看看吧
纯HTML和CSS实现JD轮播图效果
09-24
主要介绍了纯HTML和CSS实现JD轮播图效果,需要的朋友可以参考下
静态轮播图（只用HTML和css）
07-17
只用html和css写代码，有左右按钮，有浮点导航栏，鼠标移动到哪个左右按钮或浮点，那个按钮和浮点就会变色
HTML简单实现轮播图
热门推荐
qq_45225221的博客
01-09 9万+
html + js 简单实现轮播图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/82ed6054639544ae93ff737ecca71d49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGltYWtyaW3kuLY=,size_20,color_FFFFFF,t_70,g_se,x_16 附上代码： <!DOCTYPE html> <ht
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 575
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
[HTML]如何实现轮播图效果
dz1999的博客
06-08 1万+
实现轮播
html同时显示三张图片循环轮播,JQ轮播图（多张同时显示）
weixin_42536058的博客
06-04 2270
HTML:CSS:*{display: block;margin: 0px;border: 0px;}.clearfix:after{display: block;content:'';clear: both;height:0;}#carousel{width: 1224px;height: 144px;margin: 50px auto;position: relative;}#carousel...
自动轮播图代码html,自动轮播图.html
weixin_28938701的博客
05-30 4549
Document* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 20...
web前端html图片轮播,CSS实现轮播图效果（附代码）_WEB前端开发
weixin_30239869的博客
06-04 5446
CSS盒子模型是什么意思？_WEB前端开发CSS盒子模型都具备内容content、内边距padding、边框border、外边距margin这些属性，这些属性可以用日常生活中的常见事物“盒子”作一个比喻来理解，所以称作为盒子模型。CSS实现轮播图效果(附代码)理论基础CSS3 animation 属性和 @keyframes 规则主体思想1、准备相同大小的多个图片2、将要展示图片横排放在一个图片容...
只用CSS跟HTML做出无缝衔接的轮播图效果
2301_77717688的博客
03-18 515
通过CSS3的animation动画属性，完成无缝衔接的轮播图效果
用html和css javascript实现汽车图片轮播功能
05-29
以下是一个简单的汽车图片轮播的HTML/CSS/JavaScript代码示例： ``` <!DOCTYPE html> <html> <head> <title>汽车图片轮播</title> <style> .container { position: relative; width: 800px; height: 500px; margin: 0 auto; overflow: hidden; } .slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; transition: transform 0.5s ease-in-out; } .slide { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } .slide img { max-width: 100%; max-height: 100%; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .control { cursor: pointer; margin: 0 10px; font-size: 30px; color: #ccc; } .control.active { color: #000; } </style> </head> <body> <div class="container"> <div class="slides"> <div class="slide"> <img src="car1.jpg" alt="Car 1"> </div> <div class="slide"> <img src="car2.jpg" alt="Car 2"> </div> <div class="slide"> <img src="car3.jpg" alt="Car 3"> </div> <div class="slide"> <img src="car4.jpg" alt="Car 4"> </div> </div> <div class="controls"> <div class="control prev">❮</div> <div class="control next">❯</div> </div> </div> <script> var slides = document.querySelector('.slides'); var slide = document.querySelectorAll('.slide'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var index = 0; prev.addEventListener('click', function() { index--; if (index < 0) { index = slide.length - 1; } updateSlide(); }); next.addEventListener('click', function() { index++; if (index > slide.length - 1) { index = 0; } updateSlide(); }); function updateSlide() { slides.style.transform = 'translateX(-' + index * 100 + '%)'; for (var i = 0; i < slide.length; i++) { slide[i].classList.remove('active'); } slide[index].classList.add('active'); } </script> </body> </html> ``` 上述代码中，使用CSS实现了容器和轮播图的样式，包括容器的大小、轮播图的位置、轮播图的过渡效果等。JavaScript代码实现了轮播图的切换功能，通过对上一页和下一页按钮的点击事件来更新轮播图的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值