4lqedz 发表于 2024-6-29 14:16:38

纯CSS实现轮播图


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 各位小伙伴们，今天<span style="color: black;">咱们</span>来学习一下轮播图。轮播图是<span style="color: black;">咱们</span>写网页<span style="color: black;">其中</span>经常<span style="color: black;">显现</span>的一个效果，基本上各个网站上都会有这个效果。<span style="color: black;">那样</span>一<span style="color: black;">说到</span>轮播图<span style="color: black;">大众</span>脑子里的<span style="color: black;">第1</span>反应是不是用js来实现呀。</p><img src="data:image/svg+xml;utf8," style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">​ 那今天这篇<span style="color: black;">文案</span>呢<span style="color: black;">咱们</span>就不按常理出牌，<span style="color: black;">不消</span>js来写轮播图，而是利用纯css实现轮播图，听起来是不是很厉害的样子，纯css竟然能写出轮播图的效果，<span style="color: black;">那样</span>到底应该怎么写呢？接下来废话不多说，上代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后实现的效果：</p><img src="data:image/svg+xml;utf8," style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">html代码</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!-- slide是轮播图区域 --&gt;
      &lt;div class="slide"&gt;
      &lt;!-- swiper里面放的是<span style="color: black;">照片</span>--&gt;
      &lt;ul class="swiper"&gt;
      &lt;li&gt;&lt;img src="img/1.jpg" alt=""&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/2.jpg" alt=""&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/3.jpg" alt=""&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/4.jpg" alt=""&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/1.jpg" alt=""&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- <span style="color: black;">这儿</span>是轮播图上的小圆点 --&gt;
      &lt;div class="circle"&gt;
      &lt;div class="active"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>点：</p><img src="data:image/svg+xml;utf8," style="width: 50%; margin-bottom: 20px;">
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>点：<span style="color: black;">想要</span>实现<span style="color: black;">没</span>缝衔接，ul里面放的<span style="color: black;">第1</span>张图和最后一张图要一致。千万不要写错哦 ，<span style="color: black;">能够</span>看到我的<span style="color: black;">第1</span>个li里面放的是1.jpg，最后一个li<span style="color: black;">亦</span>是1.jpg。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二点：带有类名active的是激活之后的实心白点。<span style="color: black;">无</span>带类名的<span style="color: black;">便是</span>默认的空心圆。总共有4张图轮播，所有创建了4个空心圆，当播放到<span style="color: black;">第1</span>张图的时候就把实心圆移动到<span style="color: black;">第1</span>个空心圆的位置，依次类推。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">css代码：</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.slide {
      /* 写相对定位是</div>




流星的美 发表于 2024-8-21 09:33:31

你的话语真是温暖如春，让我心生感激。

流星的美 发表于 2024-8-24 12:50:37

这夸赞甜到心里，让我感觉温暖无比。

j8typz 发表于 2024-10-14 10:24:31

外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。

qzmjef 发表于 2024-11-3 03:20:23

论坛是一个舞台，让我们在这里尽情的释放自己。
页: [1]
查看完整版本: 纯CSS实现轮播图