css动画实现图片渐显,用CSS3 transition属性实现淡入淡出轮播图

迷南。 2022-09-03 01:28 667阅读 0赞

和![1282130108743696384.htm][]的尺寸，让![1282130108743696384.htm][]重叠在一起，并且opacity为0。而具有active类的![1282130108743696384.htm][]的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.οnmοuseοver=function () \{

clearInterval(slideon); //当鼠标移入时清除轮播事件

slideshow.οnmοuseοut=function () \{

slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件

具体效果见CodePen链接。

加上页码

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

在HTML的中要添加如下。

第一个我也是已经添加了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

具体效果见CodePen链接。

加上图片描述

描述文字我设成了横着进入横着出去效果。怎么实现的呢？有点像滑动式的轮播图其实。

文本我设成position: absolute;，然后是不是可以通过更改left值来进行横向移位呢，再结合transition形成动画效果就好啦。

HTML需要增加如下。

这是第一幅图片哈哈哈

这是第二幅图片咩

到第三幅了！

对文本设置样式。注意看left和transition。left为负值是什么意思呢？left为0就是紧挨着\#slideshow左侧对吧，为负的话就是继续往左移越过左侧啦。

/\*-- 设置图片描述文本的样式 --\*/

\#slideshow p\{

position: absolute;

top: 30px;

left: -400px; /\*相对于轮播图左侧左移400px\*/

line-height: 30px;

padding: 5px 30px;

font-size: 20px;

color: white;

background-color: rgba(100,100,100,0.6); /\*用rgba设置一个带透明度的背景颜色\*/

opacity: 0;

transition: all 0.5s;

\#slideshow p.active\{

left: 0;

opacity: 1;

JS很简单，更新下slideOff()和slideOn()函数。

function slideOff() \{

imgs\[current\].className=""; //图片淡出

pages\[current\].className="";

descrips\[current\].className="";

function slideOn() \{

imgs\[current\].className="active"; //图片淡入

pages\[current\].className="active";

descrips\[current\].className="active";

具体效果见CodePen链接。

还可以完善的几点

一是，轮播图一般是可以点的链接，所以![1282130108743696384.htm][]应该是嵌套在里面的，这里我偷懒了。二是，当鼠标移到的文字上时，光标变成了工字型(cursor: text;)，因为光标是默认设置，在文本上时就变了，我们可以在的CSS中设置cursor: Default;，这样就一直是普通的鼠标样式了。三是，的文字如果双击是可以选中的，比较丑，我们加上下面的代码让文本不能被选取就好了。

/\*设置不能选择文本\*/

\-ms-user-select:none;/\*IE10\*/

\-webkit-user-select:none;/\*webkit浏览器\*/

user-select:none;

完。

[1282130108743696384.htm]: /images/20220829/6f4857bf8edd4f10a22a42ced703f3d1.png