使用CSS实现简单的图片切换(轮播图) 绝地灬酷狼 2023-07-19 05:47 15阅读 0赞 ## 使用CSS实现简单的图片切换(轮播图) ## 预览图如下: ### 目录 ### * * 使用CSS实现简单的图片切换(轮播图) * 一:首先创建基本布局 * * 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点; * 二:添加CSS样式 * * 1:为图片与圆点添加相应样式,使其正常显示; * 标题2:为图片和圆点添加动画样式; ![在这里插入图片描述][2020032920013563.gif_pic_center] ## 一:首先创建基本布局 ## ### 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点; ### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>css轮播</title> </head> <body> <div class="container"> <ul> <li><img src="./img/1.jpg" alt=""></li> <li><img src="./img/2.jpg" alt=""></li> <li><img src="./img/3.jpg" alt=""></li> </ul> <ol> <li></li> <li></li> <li></li> </ol> </div> </body> </html> ## 二:添加CSS样式 ## ### 1:为图片与圆点添加相应样式,使其正常显示; ### *{ padding: 0;margin: 0;box-sizing: border-box;} li{ list-style: none; float: left; } ul img{ width: 960px; height: auto; } .container{ width: 960px;//容器大小要和图片大小保持一致。 height: 544px; margin: 50px auto 0; overflow: hidden; position: relative; border: 1px solid black; } ol{ position: absolute; bottom: 0; left: 50%; padding: 10px; margin-left: -50px; z-index: 999; } ol li{ width: 25px; height: 25px; background-color: #fff; border: 1px solid red; border-radius: 50%; margin: 0 10px; } ### 标题2:为图片和圆点添加动画样式; ### .container ul{ animation:Yui 3s cubic-bezier(0, 1, 0, 1) 1s infinite ; width: 400%; } @keyframes Yui{ 0% { transform: translateX(0px); } 33% { transform: translateX(-960px); } 66% { transform: translateX(-1920px); } 100% { transform: translateX(0px); } } ol li { animation:focus 3s linear infinite ;//时间要和图片保持一致 } ol li:nth-child(1) { animation-delay: 0s; } ol li:nth-child(2) { animation-delay: 1s; } ol li:nth-child(3) { animation-delay: 2s; } @keyframes focus { 0% { background-color: #000; } 20% { background-color: #000; } 30% { background-color: #fff; } } 转载请注明出处 [2020032920013563.gif_pic_center]: /images/20230528/2a7046198504497f990d18d91fabd633.png
相关 简单css+js实现轮播图 轮播图由于js+css+html简单实现; 效果为16个cube 点击下一轮![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd... 你的名字/ 2024年04月18日 07:08/ 0 赞/ 92 阅读
相关 使用CSS实现简单的图片切换(轮播图) 使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录 使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 绝地灬酷狼/ 2023年07月19日 05:47/ 0 赞/ 16 阅读
相关 CSS实现简单的--轮播图 第一篇还是一点一点的写吧,之前只知道老师只讲了知识点,没有串起来做一个小东西,所以总感觉学的不行 ![watermark_type_ZmFuZ3poZW5naGVpdGk_ 电玩女神/ 2022年12月08日 14:08/ 0 赞/ 197 阅读
相关 c语言实现图片轮播,纯css实现轮播图 轮播图的实现原理其实是比较简单的 举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮 阳光穿透心脏的1/2处/ 2022年10月15日 05:53/ 0 赞/ 286 阅读
相关 html图片轮播思路,css3如何实现轮播图?css3实现轮播图片的方法 我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可 妖狐艹你老母/ 2022年10月12日 05:41/ 0 赞/ 349 阅读
相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果 开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用。 ps: 功能比较简单,整个框并不能根据图片的大小自动调节, 客官°小女子只卖身不卖艺/ 2022年10月10日 11:21/ 0 赞/ 255 阅读
相关 简单html实现图片轮播,JavaScript实现简易轮播图 JavaScript实现简易轮播图 Html代码块: ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp 小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 352 阅读
相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播 HTML代码: A B C CSS代码:.pic-switch\{ width: 500px; height: 300px; margin: 0px auto; 曾经终败给现在/ 2022年10月06日 06:59/ 0 赞/ 295 阅读
相关 js计时器实现图片的无缝轮播和简单的图片切换轮播 > 几个注意事项: > ① 给某一标签设置了固定定位后,设置width:100%是以浏览器做参考的。 > ② 给某一元素设置了绝对定位时,且父元素未设置定位,会去找离该 一时失言乱红尘/ 2021年10月23日 13:20/ 0 赞/ 414 阅读
还没有评论,来说两句吧...