html - 如何每隔一段时间移动我的 CSS slider ？-6ren

html - 如何每隔一段时间移动我的 CSS slider ？

转载作者：太空宇宙更新时间：2023-11-04 07:41:05

我得到了以下我目前正在努力处理的代码:

<!DOCTYPE html>
<html >

<head>

 
		<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

.slides {
  top: 0
  px;
    width: 100%;
    height: 840px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 100%;
    min-height: 100%;
    display: block;
    position: absolute;

    transform: scale(1);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}


.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: rgb(255,133,102);
    font-size: 156pt;
    text-align: center;
    line-height: 380%;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
    
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	left:90px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(255, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(255, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(255, 0, 0, 1);
}
}

</style>
</head>
<body>
<ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container" >
		<div class="slide">
			<img src="https://cdn.shopify.com/s/files/1/9999/9999/files/Pulpbar_presentation_slide_01.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="https://cdn.shopify.com/s/files/1/9999/9999/files/ice2.jpg" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>

</body>
</html>

我想在一定时间内移动到下一个 slider 。 .nav 标签似乎是感兴趣的区域，但不幸的是我无法触发它。有什么想法是如何运作的，或者有什么建议可以继续阅读吗？

最佳答案

由于问题下的讨论越来越广泛，这里总结一下您的选择。

词汇/用例

这是我自己一直在努力解决的问题 -> 用正确的术语命名技术细节。在您的情况下，您询问了带有事件的 slider ，它通常是一个输入元素，例如 <input type="range">。，但实际上你的意思是“幻灯片”。这让一些用户感到困惑，他们离开了这个帖子。但无论如何，在您发布问题之前，请始终先尝试研究您的用例，如果您在问题下收到与语言相关的评论，则相应地对其进行更新。很公平，我们现在都知道这个问题是关于 css 幻灯片，或者其他人称之为“轮播”。此外，您可以固定一些图像来建议您的代码的预期结果是什么，以避免无聊的解释。

纯 CSS

您要求纯 CSS 幻灯片。这是可以做到的，而且已经经常做到了。 In this blog post你可以看到一些臭名昭著的例子，你可以很容易地研究它们，甚至可以直接将它们带入你的代码中。由于您的问题和评论表明您不是真正的高级编码员，我建议您先学习一般的 css，然后再学习幻灯片示例。

考虑现成的元素

我不确定您身边的 JS 有什么问题，但听起来您并不是故意避免使用 JS。如果您是从编码开始的，并且只想调出一些页面。使用某种您刚刚在页面中实现的预样式化和预编码组件库可能会容易得多。这些现成的组件数量巨大，通常称为“ Material ”，例如 Angular Material .可能最受欢迎的是 Bootstrap -> here is Bootstrap's carousel example .

关于html - 如何每隔一段时间移动我的 CSS slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48509621/

文章推荐： python - 为什么这是类型错误而不是语法错误

文章推荐： python - __init__() 缺少 1 个必需的位置参数 : 'name'

文章推荐： javascript - 两个圆圈应该跟随光标——一大一小(有延迟)

MySQL 每隔 15 分钟查询一次分组数据
我需要一个跟踪付款的结果，我可以在其中查看在过去五个小时内以 15 分钟为间隔使用了多少个付款选项。我的表“payment_options_log”有两列:payment_option 和 crea
Android 每隔 n 毫秒播放一次提示音
我创建了一个类似于节拍器的 Android 应用程序。实际上我想每 n 毫秒播放一次哔声。为此，我使用了 MediaPlayer 和计时器。我的代码是这样的: 解决方案 1: start_butto
mysql - 每隔 5 分钟计算一次数据库中有多少条目
我有多个 Raspberry Pi 从移动设备收集 wifi 信标并将它们保存在 mySQL 数据库中。我在数据库中创建了一个 View 。数据库中的每个条目都有移动设备 mac 地址、pi id、r
android - 每隔 X 次用天文钟做一些事情
我比较菜鸟我有一个天文台，当我点击一个按钮时它开始计时 crono = (Chronometer) findViewById(R.id.crono); begin= (Button) find
python - 每隔 x 小时运行一个进程
我有一个 python 脚本，我正在运行它，如下所示: python3 ./bin/abc.py --log_file ./web/prr.log 现在我需要确保上述进程每 3 小时运行一次。流程如下
python - 每隔 n 个位置将列表中的项目插入另一个列表
我有以下列表。 vector = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] inserted_elements = [2, 2, 2, 2, 2] 我想通过插入每两个元素来获得以
java - 每隔 24 小时安排一次
我想知道安排代码的最佳方法。我有一个代码可以生成报告并每隔 24 小时向一组人发送邮件。它是一个基于控制台的 Java 应用程序。我想知道安排它的最佳方法。有时我可能需要将其更改为 12 小时间隔。但
python - 每隔 N 秒在线程中实时定期执行函数
这个问题在这里已经有了答案: Run certain code every n seconds [duplicate] (7 个答案) 关闭 8 年前。我有一个线程类，它的循环需要每秒执行 4 次
string - Clojure:每隔 x 个字符将空格插入字符串
我有一个很长的 clojure 字符串，我需要每 2 个字符用空格将其拆分(例如:“1234567890”-->“12 34 56 78 90”。我使用的解决方案是: (->> (partitio
java - Android 每隔 N 个字符为字符串添加分隔符？
我想在 3 个字符后添加一个冒号。所以“123:456:789:0”我想打印它。我怎样才能做到这一点。现在输出的方式:“123:4567890” String s = "1234567890"; Sy
SQL 每隔 X 行对一列执行 AVG
我有一个包含以下(相关)列的表:id_mi、日期和值。我想使用 y 轴中“值”列中的值和 x 轴中的日期来构建图表，但由于它们很多，我希望图表上的点是 X 行的平均值。对于这个例子，假设 X = 1
ios - 整数，每隔 X 数调用一次函数
我有一个具有游戏风格元素的应用程序，即使它不是游戏，我有游戏中心正在运行，并且希望每次有 100 个“Chatters”加入他们的群组/论坛时通知当前设备用户。一旦用户达到某些里程碑(1k 订阅/加入
mysql - 每隔 30 天生成一次报告，每日总计
我有以下查询，用于计算每天的 CSR 调用指标和总数。我现在为每日报告运行它的方式是按扩展分组并将 now() 和 curdate() 值放在日期和时间列中。但是，我现在的任务是修改它以获取过去 30
ruby-on-rails - 每隔<我设置的一天的时间>自动执行一个脚本
例如，我想在每天凌晨 3 点在两个数据库之间运行同步 ruby 脚本(如果可能的话，在 rails 操作中)。将这些时间存储在数据库中会很好，因为如果同步失败，我想将其设置为在一个小时内重试(在数
Android Studio 每隔 "run"清理一次项目
我有一个 android studio 项目，它包含 C++ 代码。代码非常大，编译它大约需要 1.5 小时。每次当我点击“运行”或“调试”按钮时，gradle 中的第一个任务是:ProjectNam
c - GTK+ 每隔 x 秒调用一次函数
所以我正在为现有的 c 应用程序编写一个图形用户界面。 gui 只是一个简单的界面，它只会显示而不会真正向应用程序反馈任何信息。但是如果有一些新信息可用，我需要检查一个链表。现在我不想使用另一个线程
每隔 30 分钟执行一次 Spring cron 表达式
Java spring - 我有以下 cron 作业的 cron 表达式。 0 0/35 * * * ? 但是上面提到的 cron 表达式每小时触发一次，如下所示 1:35 2:35 3:35 4:3
sql - Oracle SQL 每隔 n 行更新一次
为了对新表字段进行一些测试，我想伪造测试数据库中现有记录的一些值。我想为表中的每 8 条记录分配一个值。我可以使用以下语法轻松选择每 8 条记录: select * from (select ro
php - 每隔 x 天强制更改密码 10 天到期？
为 CakePHP 1.3 编写一个新功能，我希望密码在 x 天后过期，并在 y 天过期前自动将密码更改为随机字符串，并通过电子邮件向用户发送新密码或登录链接。服务器上的 crontab 是正确的方法
python - 每隔 x(在 pygame 中为毫秒
我正在学习 Python 和 Pygame，我要做的第一件事是一个简单的贪吃蛇游戏。我试图让蛇每 0.25 秒移动一次。这是我循环的代码部分: while True: check_for_qu

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何每隔一段时间移动我的 CSS slider ？