具有自动播放和覆盖文本功能的纯CSS 3图像滑块
具有自动播放和覆盖文本功能的纯CSS 3图像滑块
提问于 2018-07-21 11:14:28
所以我正试着在我正在做的网页项目上做一个纯CSS3自动播放图像滑块。因此，页面的HTML如下所示：
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
<a href="portfolio.html">Portfolio</a>
<a href="sobre.html">Sobre</a>
<a href="loja.html">Loja</a>
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>所以我想要的是一次只出现一张pug图像，并让它们自动向左滑动。大小很重要，当前的大小正是我想要的大小。另外，请注意有一个文本覆盖在图像上。该文本必须留在那里。我想做一个平滑的无限大的幻灯片，但这不会微妙地返回到第一张图像。
我尝试了一些CSS，但它不会走得太远。你们可以看看：
或者寻求一种更简单的方式来了解一切：
https://codepen.io/anon/pen/OwWgoX
尽管CodePen搞乱了文本定位。
回答 1
Stack Overflow用户
发布于 2018-07-21 11:59:20
你可以使用wowslider。Wowslider。只需下载软件即可。你可以很容易地添加任何图片和任何类型的滑动变换。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51452475
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号