css怎么实现轮播图效果

这篇文章主要介绍css怎么实现轮播图效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联专业为企业提供沭阳网站建设、沭阳做网站、沭阳网站设计、沭阳网站制作等企业网站建设、网页设计与制作、沭阳企业网站模板建站服务，十载沭阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

在css中，可以使用“@keyframes”规则和“animation”属性定义动画来实现轮播图切换效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

css3动画效果的强大不言而喻，自它出现一直热度不减，它与js动画的优劣也一直成为前端界争论的话题，不可置疑的是css3动画的出现在一定程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把我们从烦人的js调试中解放出来，当然css的动画效果有其局限性，我们不能只用css3模拟出全部的就是动画，另外就是浏览器的兼容性问题。我们这次用css3实现一个轮播图效果，体验一下css3的强大。

首先说明我们可次只实现了自动轮播，效果也是最常见的淡入淡出，并未实现点击轮换效果，至少在我目前水平来看，自动轮播与点击轮换两者纯css3只能选其一，如果可以同时实现两种效果的方法，请告诉我。

一、布局

html代码没有什么可说的，样式的话首先必定slider的大盒子必定是相对定位，另外我们采用在li标签中添加background-image，因为这样才有可能用纯的css实现响应式，另外背景图为了在响应式中看清全貌，必然使用background-size:100%，另外就是高度问题了，显然slider-container必需是和li的高度一致，因为响应式中必然这个高度不能固定死，所以使用height属性显然不行，padding属性可以解决这个问题，一是background-image可以显示在padding中，二是padding中以%为单位是以父元素宽度为基准的。

*{
      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;
      background-size:100%;
}
.slider-item1{
      background-image:url(imgs/1.jpg);
}
.slider-item2{
      background-image:url(imgs/2.jpg);
}
.slider-item3{
      background-image:url(imgs/3.jpg);
}
.slider-item4{
      background-image:url(imgs/4.jpg);
}
.slider-item5{
      background-image:url(imgs/5.jpg);
}

二、设计动画

淡入淡出效果肯定是使用opacity，首先整体来看所有图片的淡入淡出都是同一个动画，只是时间不一样而已，这肯定是利用animation-delay来控制，动画无限轮换肯定使用animation-iteration-count: infinite，我们这次5张图片，整个动画分为图片停留和淡入淡出两个效果，用下图表示，箭头表示淡入淡出过程。

css怎么实现轮播图效果

因为css3中没有一个属性是规定两次动画播放的时间间隔，所以我们必须把其他图片淡入淡出时该图片的效果写进动画里，显然这时候是opacity:0；

我们为了写动画的方便，动画使用线性函数，也就是animation-timing-function:linear;整个过程使用20s，一次停留使用3秒，一次淡入淡出使用1s，折合成百分比也就是15%和5%；

@keyframes fade{
0%{
      opacity:0;
      z-index:2;
}
5%{
      opacity:1;
      z-index: 1;
}
20%{
      opacity:1;
      z-index:1;
}
25%{
      opacity:0;
      z-index:0;
}
100%{
      opacity:0;
      z-index:0;
}
}

接下来就是为每张图片添加animation-delay了，因为第一张图片必须显示在最前，所以其他通过相邻兄弟选择器使用opacity:0，第一张图片开始不需要淡入淡出，直接跳至停留也就是5%，所以animation-delay为-1s，第二章图片和第一张相隔20%，也就是4s，animation-delay为3s，以此类推

.slider-item + .slider-item{
      opacity:0;
}
.slider-item1{
      animation-delay: -1s;
}
.slider-item2{
      animation-delay: 3s;
}
.slider-item3{
      animation-delay: 7s;
}
.slider-item4{
      animation-delay: 11s;
}
.slider-item5{
      animation-delay: 15s;
}

这个时候我们的轮播图可以动了

三、添加轮播焦点

添加轮播焦点当然不是为了点击，而是告诉访问者这里有几张图片和目前图片的位置，至少以我个人而言，轮播焦点很重要，因为如果我不知道轮播的图片有几张，我又没有办法点击，我就会非常不安，感觉自己没有看到整个网页的全貌。所以我们还是添加一下轮播焦点。首先非常明确的这个仍然可以使用上面的动画，另外布局肯定使用position：absolute，另外很明显焦点我们必须写两次，一次是当前图片的样式，一次是非当前图片的样式

.focus-container{ position:absolute; bottom:2%; z-index:7; margin:0 auto; left:0; right:0; } .focus-container ul{ margin-left:46%; } .focus-container li{ width:10px; height:10px; border-radius:50%; float:left; margin-right:10px; background:#fff; } .focus-item{ width:100%; height:100%; background:#51B1D9; border-radius:inherit; animation-duration: 20s; animation-timing-function: linear; animation-name:fade; animation-iteration-count: infinite; } .focus-item1{ animation-delay: -1s; } .focus-item2{ animation-delay: 3s; } .focus-item3{ animation-delay: 7s; } .focus-item4{ animation-delay: 11s; } .focus-item5{ animation-delay: 15s; }

/*css reset start*/ *{ margin:0; padding:0; } ul,li{ list-style: none; } /*css reset end*/ /*css public start*/ .floatfix { *zoom: 1; } .floatfix:after { content: ""; display: table; clear: both; } /*css public end*/ /*slider start*/ .slider-contaner{ width:100%; position:relative; } .slider-item + .slider-item{ opacity:0; } .slider-item{ width:100%; position:absolute; animation-timing-function: linear; animation-name:fade; animation-iteration-count: infinite; background-size:100%; } .focus-container{ position:absolute; z-index:7; margin:0 auto; left:0; right:0; } .focus-container li{ width:10px; height:10px; border-radius:50%; float:left; margin-right:10px; background:#fff; } .focus-item{ width:100%; height:100%; border-radius:inherit; animation-timing-function: linear; animation-name:fade; animation-iteration-count: infinite; } .focus-item2,.focus-item3,.focus-item4,.focus-item5{ opacity:0; } .focus-container ul{ margin-left:46%; } /*设置轮播焦点的位置*/ .focus-container{ bottom:2%; } /*设置当前图片焦点的颜色*/ .focus-item{ background:#51B1D9; } /*设置动画，请根据实际需要修改秒数*/ .slider-item,.focus-item{ animation-duration: 20s; } .slider-item1,.focus-item1{ animation-delay: -1s; } .slider-item2,.focus-item2{ animation-delay: 3s; } .slider-item3,.focus-item3{ animation-delay: 7s; } .slider-item4,.focus-item4{ animation-delay: 11s; } .slider-item5,.focus-item5{ animation-delay: 15s; } @keyframes fade{ 0%{ opacity:0; z-index:2; } 5%{ opacity:1; z-index: 1; } 20%{ opacity:1; z-index:1; } 25%{ opacity:0; z-index:0; } 100%{ opacity:0; z-index:0; } } /*设置背景，响应式请利用媒体查询根据断点修改路径*/ .slider-item1{ background-image:url(imgs/1.jpg); } .slider-item2{ background-image:url(imgs/2.jpg); } .slider-item3{ background-image:url(imgs/3.jpg); } .slider-item4{ background-image:url(imgs/4.jpg); } .slider-item5{ background-image:url(imgs/5.jpg); } /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/ .slider,.slider-item{ padding-bottom:40%; }

大橙子网站建设，新征程启航

css怎么实现轮播图效果

其他资讯