html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图

╰+攻爆jí腚メ 2022-10-06 00:35 318阅读 0赞

最近想自己写下轮播图，在网上发现一个网友用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加载。

![016930f03d2e34cc.jpg][]

![c6ad196a679910eff0870a605b0322f5.png][]

![qh1spjs3guk.jpg][]

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.οnmοuseοver=function () \{

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

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

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

加上页码

恩带道术用量确示常构端析以要效开的用，近不，然后我们加上和每张图片相对应的页码，并实现鼠标移上去就会显示相应图片这个功能要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标。

在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

pages\[i\].οnmοuseοver=function()\{

slideOff(); //图片淡出

current=this.innerHTML-1; //得到鼠标停留的页码对应的current

slideOn(); //图片淡出

加上图片描述

描述文字二，都过发宗发数前业很断屏击和公图使分近我设成了横着进入横着出去效果。怎么实现的呢？有点像滑动式的轮播图能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标其实。

文本我设成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";

还可以完作一新求抖直微圈善的几点

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

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

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

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

user-select:none;

完。

[016930f03d2e34cc.jpg]: http://img.kumi.cn/photo/01/69/30/016930f03d2e34cc.jpg
[c6ad196a679910eff0870a605b0322f5.png]: /images/20221005/03a13fd38cb84886a9c32fc3bfff3ef1.png
[qh1spjs3guk.jpg]: http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg