用CSS3 transition属性实现淡入淡出轮播图

Heier 发布于2019-08-30 13:10 / 3598人阅读

摘要：最近想自己写下轮播图，在网上发现一个网友用属性实现的轮播，赶脚超简单哦，自己学习了后整理如下。如果我们用给加上类，的就要变成对吧，由于有属性，所以要等，才能完全变为，实现了淡入。

最近想自己写下轮播图，在网上发现一个网友用CSS transition属性实现的轮播，赶脚超简单哦，自己学习了后整理如下。（找不到原网址了-.-...就不贴了...）
（如果不了解transition，先去这里（点我，点我）学习下）

思路

图片淡入淡出效果是不透明度（CSS opacity属性）的变换过程。举例，让图片淡出，就是图片的opacity属性在一段时间内逐渐从1变为0，淡入呢，则是图片的opacity属性在一段时间内逐渐从0变为1，用transition可以轻松实现啊。

我们设置图片的CSS样式如下，先不考虑布局和宽高这些。

img{
  opacity: 0;
  transition: opacity 1s;
}
img.active{
  opacity: 1;
}

这段CSS能实现什么呢？

一开始，img的opacity为0，所以我们看不见。如果我们用JS给img加上active类，img的opacity就要变成1对吧，由于有transition属性，所以要等1s，opacity才能完全变为1，实现了淡入。

那淡出呢？你想下，等img淡入完了之后，我又用JS删掉img的active类会怎么样？这时候img的opacity应该从1变为0对吧，又由于有transition属性，所以opacity要等1s才能变为0，这就实现了淡出。

JS的setInterval(code,millisec)（点我学习该函数）可以每隔一段时间就执行指定代码。如果我每隔1s就更改下img的类名，如果有active类就删掉，如果没有就加上，这样图片就不断地淡入 → 淡出 → 淡入 → 淡出。

怎么实现多张图片轮流淡入淡出呢？

你每次删掉当前图片的active类（淡出），然后给下一张图片加上active类（淡入），这样就实现了图片的切换。

剩下的就是每隔固定时间间隔，执行切换图片函数就行了。

先上两个效果图。

点我跳转CodePen看本文代码最终效果，打开可能有点慢，耐心等等。这个是图片自动轮播，也可以通过图片底部的页码选择图片。

点我跳转看稍微变动后的另一种效果（这是仿的京东首页轮播图效果，鼠标滑到图片上时会显示左右按钮框，点击左右按钮框也可实现图片切换。）

只有图片的轮播

HTML比较简单，就是一个

里面扔三个（假设是三张轮播图哈）。第一张图片已经加上了active类，这样网页加载的时候就会有图片，通过JS来添加active类初始化比较慢，要等JS加载。

CSS如下。设置好

和的尺寸，让重叠在一起，并且opacity为0。而具有active类的的opacity为1。当然，别忘了设置transition: opacity 1s linear;。

*{
  padding: 0;
  margin: 0;
}
#slideshow{
  width: 800px;  
  height: 350px;
  margin: 0 auto; /*设置在页面水平居中*/
  overflow: hidden;
  position: relative;  
}
#slideshow img{
  width: 800px;
  position: absolute; /*图片采取绝对定位，均位于左上角，重叠在一起*/
  top: 0;
  left: 0;
  opacity: 0; /*初始不透明度为0，图片都看不见*/
  transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active{
  opacity: 1; /*有active类的图片不透明度为1，即显示图片*/
}

JS如下。在轮播函数slideshow()里，定义了图片淡出函数slideOff()，图片淡入函数slideOn()和切换图片函数changeSlide()。

//---------主角：轮播图函数-------------
function slideshow() {
  var slideshow=document.getElementById("slideshow"),
  imgs=slideshow.getElementsByTagName("img"), //得到图片们
  current=0; //current为当前活跃的图片编号

  function slideOff() {
    imgs[current].className=""; //图片淡出
  }
  function slideOn() {
    imgs[current].className="active"; //图片淡入
  }

  function changeSlide() { //切换图片的函数
    slideOff(); //图片淡出
    current++; //自增1
    if(current>=3) current=0;
    slideOn(); //图片淡入
  }
  
  //每2s调用changeSlide函数进行图片轮播
  var slideon=setInterval(changeSlide,2000);  
}

slideshow();

这里有个问题哦，轮播图一般鼠标移入图片后，轮播就停止了，当鼠标移出后，轮播又开始对吧。我们用JS的onmouseover和onmouseout来实现。

在JS的slideshow()函数中加入以下代码即可。

slideshow.onmouseover=function () {
  clearInterval(slideon); //当鼠标移入时清除轮播事件
}
slideshow.onmouseout=function () {
  slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件
}

具体效果见CodePen链接。

加上页码

恩，然后我们加上和每张图片相对应的页码，并实现鼠标移上去就会显示相应图片这个功能。

在HTML的

中要添加如下。

1
  2
  3

第一个我也是已经添加了active类。

然后设置页码的样式，让它们位于图片的底部，一字排开。

/* 设置页码的样式 */
#slideshow div{
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
}
#slideshow span{
  display: inline-block;
  width: 25px;
  line-height: 25px;  /*当只有一行文本时height等于line-height*/
  border-radius: 25px;  /*设置页码为圆形*/
  margin: 0 15px;  
  background: white;
  font-size: 16px;
}
#slideshow span.active{
  color: white;
  background: #FFDD55;
}

在JS中，slideOff()和slideOn()函数都要更新下，因为淡入淡出时的类名也要进行变更。

function slideOff() {
  imgs[current].className=""; //图片淡出
  pages[current].className="";
}
function slideOn() {
  imgs[current].className="active"; //图片淡入
  pages[current].className="active";
}

再就是鼠标移入时，需要显示对应的图片对吧。我们先把当前图片淡出，然后得到当前对应的current，再让图片淡入就好啦。

for(var i=0; i<pages.length; i++)="" {="" 定义鼠标移入和移出页码事件="" pages[i].onmouseover="function(){" slideoff();="" 图片淡出="" current="this.innerHTML-1;" 得到鼠标停留的页码对应的current="" slideon();="" }="" }

专线服务云服务器 react实现轮播图淡出淡入淡入淡出淡入淡出显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115351.html

用CSS3 transition属性实现淡入淡出轮播图

摘要：首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。元素不能用作语义用途以外的其他目的。空白段落元素并非用于跳行。当浏览器支持时，它们会自动地呈现出来并发挥作用。Html1、Html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区别HTML和HTML5?HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。拖拽释放(D...

姘存按 2019-08-22 10:45 评论0 收藏0
基于CSS3实现淡入（fadeIn）淡出（fadeOut）效果

摘要：网上的淡入淡出效果大多是依照中和的方法使用来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。思路是将淡入，淡出的效果做成预先定义好的样式类，然后用改变元素的类来达到图片轮播。网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。这里提供另外一个思路，即通过预先定义...

XUI 2019-08-21 10:36 评论0 收藏0
React动画

摘要：一实现动画通过让界面迅速发生变化但动画的哲学告诉我们变化要慢得用一个逐渐变化的过程来过渡从而帮助用户理解页面界面的变化可以分为节点或组件的增与减以及节点或属性的变化其中提供的能够帮助我们便捷的识别出增加或删除的组件从而让我们能够专注于更加简一.React实现动画 1.React通过setState让界面迅速发生变化,但动画的哲学告诉我们,变化要慢,得用一个逐渐变化的过程来过渡,从而帮...

ThinkSNS 2019-08-20 18:29 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
原生js + css3 + 定时器无缝轮播图（部分）

摘要：起因现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图无缝，但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。 ## 起因 ## 现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。 ## 上代码 ## html的代码分类 ...

IamDLY 2019-08-23 15:21 评论0 收藏0