图片轮播的实现-阿里云开发者社区

图片轮播的实现

2023-09-26 37

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 图片轮播的实现

`1.图片轮播`（使用动画，根据图片不同时间的移动值来实现，图片排放在一个容器中，图片大小要与容器大小一致）

#photo>img{
    float:left;
    width:330px;
    height:470px;
  }
  #photo{
    width:1650px;
    animation:switch 7s ease-out infinite;
  }
 <div id="container">
                    <div id="photo">
                      <img src="images/dushu2.jpg">
                      <img src="images/dushu3.jpg">
                      <img src="images/book (4).jpg">
                      <img src="images/book (5).jpg">
                      <img src="images/dushu (6).jpg">
                    </div>
 </div>

上述每个图片宽度为330px；

img第一外层的photo为图片容器，即在此盒子中放了5张图片；图片中有添加 float的效果，这样就不用考虑去边距问题。

#container{
    width:990px;
    height:450px;
    overflow: hidden; 
      }

img第二外层的container为所展示图片的容器，上述所展示为3张，剩余两张图片溢出使用overflow:hidden来将其隐藏起来

 #photo{
    width:1650px;
    animation:switch 7s ease-out infinite;
  }
@keyframes switch{
    0%,25%{margin-left: 0;}
    35%,65%{margin-left:-330px;}
    75%,100%{margin-left: -660px;}
  }

上述为使所展示的容器中均有3张图片，一共5张图片，第一阶段展现出来的即为前三张；第二阶段第一张图片左一一个宽度展现出来的为第2，3，4张图片；第三阶段移动2个图片的宽度展现出来后3张图片。

该动画一个周期为7s,且以慢速无限循环；

35%~65%为图片停留阶段，和第一阶段空出来的时间为动画切换的部分；

2.图片渐变轮播（实现前面图片消失时后一个隐隐出现的效果）

<div id="RotationPicture">
          <div id="screen">
               <a href="#"target="_blank"><img src="images/QQ图片.jpg" width=100%；height=100%;></a>
               <a href="#"target="_blank"><img src="images/two.jpg" width=100%；height=100%;></a>
               <a href="#"target="_blank"><img src="images/four.png" width=100%；height=100%;></a>
               <a href="#"target="_blank"><img src="images/three.png" width=100%；height=100%;></a>
           </div>
 </div>

先创建轮播图片的div,id为RotationPicture，在创建一个放入图片的div，id为screen,其中放了4张图片链接。

将图片设为宽度和高度都设置成100%，可以使整个图片显示出来；自由缩放图片且图片放大的尺寸不大于其原始值可以将其设置为max-weight:100%;height:auto;;背景图片可以使其为background-size:100%;使整个背景图片完全放入div中。

#RotationPicture{
    height:50px;
}
#screen a{
    position:absolute;
    animation: donghua 12s Infinite;
}
@keyframes donghua{
    0%{opacity: 0;}
    3%{opacity:1;}
    25%{opacity: 1;}
    28%{opacity: 0;}
}
#screen a:nth-child(1){animation-delay:0s}
#screen a:nth-child(2){animation-delay:3s}
#screen a:nth-child(3){animation-delay:6s}
#screen a:nth-child(4){animation-delay:9s}

先要设置容器的大小位置；动画周期为12s,无限循环；animation-delay为动画延迟时间，即第二张图片于整个阶段第3s开始播放，第3张图片于第6s开始播放；0%-3%中有3%的过渡时间（12s的3%），从刚刚开始的完全透明逐渐过渡到完全不透明，25%-28%再由完全不透明逐渐过渡到完全透明，实现前一张图片消失，同时后一张图片出现的效果。

文章标签：

容器