欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css如何实现幻灯片效果?幻灯片的实现方法(代码示例)

程序员文章站 2022-04-11 23:40:17
...
本篇文章给大家带来的内容是介绍css如何实现幻灯片效果?幻灯片的实现方法(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

下面我们就通过代码来一步步实现幻灯片切换(淡入淡出)的效果:

1、建立html文件,编写demo

首先我们要在页面上设置图像列表,包含在div盒子中。类似于以下内容:

<div id="stage">
	<a href="img/1.jpg"><img src="img/1.jpg" width="640" height="400"></a>
	<a href="img/2.jpg"><img src="img/2.jpg" width="640" height="400"></a>
	<a href="img/3.jpg"><img src="img/3.jpg" width="640" height="400"></a>
	<a href="img/4.jpg"><img src="img/4.jpg" width="640" height="400"></a>
	<a href="img/5.jpg"><img src="img/5.jpg" width="640" height="400"></a>
	<a href="img/6.jpg"><img src="img/6.jpg" width="640" height="400"></a>
	<a href="img/7.jpg"><img src="img/7.jpg" width="640" height="400"></a>
	<a href="img/8.jpg"><img src="img/8.jpg" width="640" height="400"></a>
</div>

在此示例中,所有图像都有链接,但这不是必需的。如果你删除链接,你只需要改变一些CSS和JavaScript来引用'img'而不是'a'。

2、使用CSS来叠加图像

以下是我们用于以下演示的CSS代码:

#stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

通过将链接设置为position:absolute,我们将所有图像从文档流中取出并将它们堆叠在一起。然后,我们需要为#stage指定宽度和高度, 以便为幻灯片显示在页面上保留空间。这等于图像尺寸加上填充(每边10px)和边框(每边1px)。

然后,我们使用一些nth-of-type()选择器将第一个图像放在堆栈顶部,第二个图像放在堆叠的后面,其余图像隐藏在显示器之外。

最后,我们将动画关键帧分配给顶部图像,告诉它在设置opacity:0,淡出之前等待4秒。现在所缺少的只是一点JavaScript来将面对的图像移动到堆栈的底部,以便下一个图像可以依次显示和淡出。

3、使用JavaScript来触发效果

这里需要的只是为keyframe 动画结束时触发的图像分配事件处理程序。它需要最重要的照片,并把它移到后面:

window.addEventListener("DOMContentLoaded", function(e) {
    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

最上面的新图像现在假设为 nth-of-type(1)属性,包括关键帧动画--fader,依此类推其他图像。

就是这样!没有臃肿的代码,没有插件,没有库,只有几行vanilla JavaScript可以在所有现代浏览器中使用。

4、效果图:

运行以上代码就可以获得一个简单的淡入淡出幻灯片:

css如何实现幻灯片效果?幻灯片的实现方法(代码示例)

总结:以上就是本篇文章所实现的淡入淡出幻灯片效果,大家可以自己动手试试,加深理解,希望能对大家的学习有所帮助。

以上就是css如何实现幻灯片效果?幻灯片的实现方法(代码示例)的详细内容,更多请关注其它相关文章!