论坛 › 青海 › 手把手教你用纯css3实现轮播图效果

b1gc8v 发表于 2024-6-29 14:18:59

手把手教你用纯css3实现轮播图效果

    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>前言</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css3动画效果的强大<span style="color: black;">不问可知</span>，自它<span style="color: black;">显现</span><span style="color: black;">始终</span>热度不减，它与js动画的优劣<span style="color: black;">亦</span><span style="color: black;">始终</span><span style="color: black;">作为</span>前端界争论的<span style="color: black;">专题</span>，不可置疑的是css3动画的出<span style="color: black;">此刻</span><span style="color: black;">必定</span>程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把<span style="color: black;">咱们</span>从烦人的js调试中解放出来，当然css的动画效果有其局限性，<span style="color: black;">咱们</span><span style="color: black;">不可</span>只用css3模拟出全部的<span style="color: black;">便是</span>动画，<span style="color: black;">另一</span><span style="color: black;">便是</span>浏览器的兼容性问题。<span style="color: black;">咱们</span>这次用css3实现一个轮播图效果，体验一下css3的强大。</p>
    <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>水平来看，自动轮播与点击轮换两者纯css3只能选其一，<span style="color: black;">倘若</span><span style="color: black;">能够</span><span style="color: black;">同期</span>实现两种效果的<span style="color: black;">办法</span>，请告诉我。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>布局</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;section class="slider-contaner"&gt;
      &lt;ul class="slider"&gt;
      &lt;li class="slider-item slider-item1"&gt;&lt;/li&gt;
      &lt;li class="slider-item slider-item2"&gt;&lt;/li&gt;
      &lt;li class="slider-item slider-item3"&gt;&lt;/li&gt;
      &lt;li class="slider-item slider-item4"&gt;&lt;/li&gt;
      &lt;li class="slider-item slider-item5"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/section&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">html代码<span style="color: black;">无</span>什么可说的，样式的话<span style="color: black;">首要</span>必定slider的大盒子必定是相对定位，<span style="color: black;">另一</span><span style="color: black;">咱们</span>采用在li标签中添加bac<span style="color: black;">公斤</span>round-image，<span style="color: black;">由于</span><span style="color: black;">这般</span>才有可能用纯的css实现响应式，<span style="color: black;">另一</span>背景图为了在响应式中看清全貌，必然<span style="color: black;">运用</span>bac<span style="color: black;">公斤</span>round-size:100%，<span style="color: black;">另一</span><span style="color: black;">便是</span>高度问题了，显然slider-container必需是和li的高度一致，<span style="color: black;">由于</span>响应式中必然这个高度<span style="color: black;">不可</span>固定死，<span style="color: black;">因此</span><span style="color: black;">运用</span>height属性显然不行，padding属性<span style="color: black;">能够</span><span style="color: black;">处理</span>这个问题，一是bac<span style="color: black;">公斤</span>round-image<span style="color: black;">能够</span><span style="color: black;">表示</span>在padding中，二是padding中以%为单位是以父元素宽度为基准的。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">*{
      margin:0;
      padding:0;
      }
      ul,li{
      list-style: none;
      }
      .floatfix {
      *zoom: 1;
      }
      .floatfix:after {
      content: "";
      display: table;
      clear: both;
      }
      .slider-contaner{
      width:100%;
      position:relative;
      }
      .slider,.slider-item{
      padding-bottom:40%;
      }
      .slider-item{
      width:100%;
      position:absolute;
      bac<span style="color: black;">公斤</span>round-size:100%;
      }
      .slider-item1{
      bac<span style="color: black;">公斤</span>round-image:url(imgs/1.jpg);
      }
      .slider-item2{
      bac<span style="color: black;">公斤</span>round-image:url(imgs/2.jpg);
      }
      .slider-item3{
      bac<span style="color: black;">公斤</span>round-image:url(imgs/3.jpg);
      }
      .slider-item4{
      bac<span style="color: black;">公斤</span>round-image:url(imgs/4.jpg);
      }
      .slider-item5{
      bac<span style="color: black;">公斤</span>round-image:url(imgs/5.jpg);
      }</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>设计动画</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">淡入淡出效果肯定是<span style="color: black;">运用</span>opacity，<span style="color: black;">首要</span>整体来看所有<span style="color: black;">照片</span>的淡入淡出都是同一个动画，只是时间不<span style="color: black;">同样</span><span style="color: black;">罢了</span>，这肯定</p>

1fy07h 发表于 4 天前

楼主发的这篇帖子，我觉得非常有道理。

查看完整版本: 手把手教你用纯css3实现轮播图效果