仅使用CSS完成图片轮播

最新推荐文章于 2021-05-19 20:59:07 发布
最新推荐文章于 2021-05-19 20:59:07 发布
阅读量142 收藏
点赞数
原文链接：https://www.bilibili.com/video/av15393502?from=search&seid=5610491624395164034
版权

仅使用CSS完成图片轮播

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <style type="text/css">
           img{
               position: absolute;  /*让四张图片重叠*/
               opacity: 0;     /*设置透明度为0*/
               animation: Lunbo 12s Infinite;   /*设置动画组 Infinite为无限循环*/
           }
           /*动画效果*/
           @keyframes Lunbo {
                  0%{opacity: 0}
                  2%{opacity: 1}
                  24%{opacity: 1}
                  25%{opacity: 0}
           }
           /*图片延迟*/
           img:nth-child(0){animation-delay: 0s}
           img:nth-child(1){animation-delay: 3s}
           img:nth-child(2){animation-delay: 6s}
           img:nth-child(3){animation-delay: 9s}
       </style>
</head>
<body>
        <div>
            <img src="../image/1.jpg" alt="">
            <img src="../image/2.jpg" alt="">
            <img src="../image/3.jpg" alt="">
            <img src="../image/4.jpg" alt="">
        </div>
</body>
</html>
思维

通过调节透明度的方式来实现图片轮播，图片每12秒完成一次循环，每张图片只显示3秒即0%—25%时opcity值为1（显示），其他时候值为0（隐藏)。然后设置图片延迟3s。
在这里插入图片描述
如图方框是显示时间 横线是隐藏时间，每张图片12秒，把他们显示的时间给错开。

转载自哔哔哩哩地址，有空的可以去看看

lo_olo_ol
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用css3实现轮播特效
smileshang1224的博客
11-12 572
使用css3实现轮播特效 使用css3实现轮播特效的主体思想： 我们会在同样的位置准备好多个大小相同的图片，并且横放在div容器内，然后在div容器之上设置一个展示容器，其中展示容器的大小和图片大小相同，最后给图片容器添加自定义动画，并且在动画不同阶段设置递增的偏移值。 注意： 动画效果分为两部分：切换和停留。 动画的偏移值和图片大小相关。 使用css3实现轮播特效的原理： 首先必须保证展示容器大...
使用CSS实现简单的图片切换（轮播图）
qq_43452286的博客
03-29 3万+
使用CSS实现简单的图片切换（轮播图） 预览图如下： 一:首先创建基本布局 创建一个div容器 ，里面的ul与ol标签分别对应轮播图片和下方圆点； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
利用css完成轮播图效果
oops
05-19 811
利用css完成轮播图效果方法很简单，下面先看代码 <style> * { margin: 0; padding: 0; } div { margin: 200px auto; width: 520px; height: 280px; border: 1px solid #000; position: relative; } ul { display: fl
css实现三道杠菜单效果和轮播图切换小圆点效果
黑夜人的博客
01-08 3039
使用场景和三道杠效果： 使用场景和小圆点效果：
使用JS实现简单的图片轮播
lo_olo_ol的博客
12-17 130
全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="main"> <div id=...
CSS实现图片轮播
Heqianqian的博客
11-26 3619
使用CSS实现简单的图片轮播功能示例 1.分析 整个屏幕可以分为四个小块 每一块都使用相同的背景图片 用backgroung-position改变显示图片的位置 使他们各自显示的图片拼起来正好是一个整体的图片 接着通过animation动画产生滑动的效果 其次这四个小块都放在一个盒子里 这个盒子的背景将是下一张要显示的图片 四个小方块绝对定位在这个盒子的上下左右 这样当
原生js和css实现图片轮播效果
10-20
总结来说，原生JavaScript和CSS实现的图片轮播效果主要是通过改变图片的`z-index`和使用CSS的过渡效果来实现平滑的切换。JavaScript负责控制图片的堆叠顺序和动画触发时机，而CSS则负责图片的样式和动画效果。这种...
纯CSS3实现图片无间断轮播效果
09-27
此外，使用纯CSS3来完成图片轮播功能，意味着能够利用浏览器的硬件加速，进一步提升动画的性能。 需要注意的是，上述方法虽然在现代浏览器上表现良好，但在一些老旧的浏览器中可能会遇到兼容性问题。因此，在实际...
css图片切换效果代码[不用js]
10-30
标题中的“css图片切换效果代码[不用js]”指的是使用CSS来实现图片的动态切换效果，而无需依赖JavaScript。在Web开发中，通常图片切换效果是通过JavaScript来完成的，但这种方法可能会增加页面的复杂性，对搜索引擎...
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
10-24
本文主要介绍了一种利用JavaScript与CSS来实现图片幻灯片自动改变切换方向的方法。在现代网页设计中，幻灯片...通过上述知识点的综合运用，可以灵活地开发出具有个性化的图片轮播效果，满足各种不同的网页设计需求。
jQuery+CSS3图片翻转切换特效代码
03-20
这种特效能够使图片在用户交互时展现出翻转的效果，通常用于图片切换、轮播图或者过滤器功能，以提升用户的互动体验。 jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画设计以及...
纯css实现轮播图（自动轮播和手动轮播）效果_☆*往事随風*☆的博客
热门推荐
☆往事随風☆的博客
04-03 10万+
纯css实现轮播图效果 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录纯css实现轮播图效果一、前言二、基本思路三、实现步骤1.创建一个容器来进行轮播图的展示2.创建一个容器来存储图片3.在存储容器中放入图片4.为图片设置动画5.效果展示6.整体代码四、总结 一、前言 轮播图在网页中是一种必不可少的元素，轮播图的使用，使网页的内容展示更加生动，大大提高了用户体验，一般我们都会使用js来实现这一功能，但今天我们主要介绍一下如何使用css来实现网页轮播图的功能。 二、基本思路
+【CSS3】使用纯css代码实现图片轮播效果
飛天网事
09-15 8万+
使用纯CSS3代码实现简单的图片轮播。 1.基本布局： 将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。 2.设置动画： 然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。 3.动画分解： 为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。
只用CSS实现轮播图
编码揭秘的专栏
05-17 3614
天天写前端的你，会自己写一个轮播图吗，而且不能用js哦，知道轮播图的原理吗？ 今天我们要讲的是如何只用css实现轮播图效果，也叫banner，就是我们经常在APP或网站首页顶部看到的一系列图片切换。就像淘宝官网首页那样： 实现原理 一图胜千言，先上图： 解释一下，轮播图并排排列，组成一张很宽的图片，而手机屏幕宽度是固定的，这样每过一段时间，我们把宽的图想做平移一些距离，一般是平移一个屏幕宽度，比如屏幕宽320px，就平移320px，这样就达到了切换图片的目的。 注意点，由于每次都平移一个手机宽度，即每张
只用css实现图片自动轮播效果
weixin_43416686的博客
06-01 1万+
css实现图片轮播 只用css实现图片轮播效果 代码 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> img{ position:...
电脑升级改造纪实，增加路由器刷机固件
最新发布
09-04
路由器固件
私域人员配置表.xlsx
09-04
私域人员配置表
使用jquery的siblings函数完成图片轮播
05-31
好的，我来给您提供一个使用 jQuery 的 siblings 函数完成图片轮播的示例代码： HTML 代码： ```html <div class="slider"> <img src="img1.jpg" alt="图片1"> <img src="img2.jpg" alt="图片2"> <img src="img3.jpg" alt="图片3"> </div> ``` CSS 代码： ```css .slider { position: relative; width: 800px; height: 400px; overflow: hidden; } .slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; } .slider img.active { opacity: 1; z-index: 2; } ``` JavaScript 代码： ```javascript $(function() { // 获取图片元素和计数器 const $imgs = $('.slider img'); let count = 0; // 定义轮播函数 function slide() { // 获取当前图片和下一张图片 const $currentImg = $imgs.eq(count); const $nextImg = $currentImg.siblings('img').eq(count); // 切换图片 $currentImg.removeClass('active'); $nextImg.addClass('active'); // 更新计数器 count = (count + 1) % $imgs.length; } // 设置定时器 setInterval(slide, 3000); }); ``` 代码中，我们首先使用 jQuery 的 `$` 函数获取图片元素和计数器。接着，我们定义了轮播函数 `slide`，其中使用了 jQuery 的 `siblings` 函数获取下一张图片。在轮播函数中，我们将当前图片的 `active` 类移除，同时将下一张图片的 `active` 类添加上，从而实现了图片的切换。最后，我们使用 `setInterval` 函数设置了一个定时器，每隔3秒调用一次轮播函数。 希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值