Html 如何使CSS滑块自动播放

我有一个简单的HTML/CSS滑块，只有两张幻灯片。 我需要让它每7秒自动播放一次幻灯片。 我不熟悉jquery或javascript，所以实现css解决方案对我来说更容易

你能帮忙吗

你现在可以在

谢谢

正文{
溢出：隐藏；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
/*滑块包装器*/
.css滑块包装器{
显示：块；
背景：#FFF；
溢出：隐藏；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
/*滑块*/
.滑块{
宽度：100%；
身高：100%；
背景：#ccc；
位置：绝对位置；
左：0；
排名：0；
不透明度：1；
z指数：0；
显示器：flex；
显示：-webkit flex；
显示：-ms flexbox；
弯曲方向：行；
柔性包装：包装；
-webkit-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
证明内容：中心；
对齐内容：居中对齐；
-webkit转换：-webkit转换1600ms；
转换：-webkit转换1600ms，转换1600ms；
-webkit转换：规模（1）；
变换：比例（1）；
}
/*每张幻灯片的背景色*/
.幻灯片1{
背景：#00bcd7；
左：0；
}
.幻灯片2{
背景#009788；
左：100%；
}
.slider>div{
文本对齐：居中；
}
/*滑块内部滑动效果*/
.滑块h2{
颜色：#FFF；
字号：900；
文本转换：大写；
字体大小：45px；
线高：120%；
不透明度：0；
-webkit转换：translateX（500px）；
转换：translateX（500px）；
}
.滑块.按钮{
颜色：#FFF；
填充：5px30px；
背景：rgba（255，255，255，0.3）；
文字装饰：无；
不透明度：0；
字体大小：15px；
线高：30px；
显示：内联块；
-webkit转换：translateX（-500px）；
转换：translateX（-500px）；
}
.滑块h2，
.滑块.按钮{
-webkit转换：不透明度800ms，-webkit转换800ms；
变换：变换800ms，不透明度800ms；
-webkit转换延迟：1s；
/*狩猎*/
过渡延迟：1s；
}
/*下一个和上一个箭头*/
.控制{
位置：绝对位置；
最高：50%；
宽度：50px；
高度：50px；
利润上限：-25px；
z指数：55；
}
.控制标签{
z指数：0；
显示：无；
文本对齐：居中；
线高：50px；
字体大小：50px；
颜色：#FFF；
光标：指针；
不透明度：0.2；
}
.控件标签：悬停{
不透明度：0.5；
}
.下一个{
右：1%；
}
.以前的{
左：1%；
}
/*滑动传呼机*/
.滑块分页{
位置：绝对位置；
底部：20px；
宽度：100%；
左：0；
文本对齐：居中；
z指数：1000；
}
.滑块分页标签{
宽度：10px；
高度：10px；
边界半径：50%；
显示：内联块；
背景：rgba（255，255，255，0.2）；
边际：0.2px；
边框：实心1pxRGBA（255,255,255,0.4）；
光标：指针；
}
/*滑块寻呼机箭头事件*/
.slide-radio 1:选中~.下一步.numb2，
.slide-radio2:选中~.上一个。编号1{
显示：块；
z指数：1
}
/*滑块寻呼机事件*/
.slide-radio1:选中~.slide分页。第1页，
.slide-radio2:选中~.slide分页。第2页{
背景：rgba（255、255、255、1）
}
/*滑块滑动效果*/
.slide-radio1:选中~.slide{
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
.slide-radio2:选中~.slide{
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
.slide-radio1:选中~.slide1 h2，
.slide-radio2:选中~.slide2 h2，
.slide-radio1:选中~.slide1.按钮，
.slide-radio2:选中~.slide2.按钮{
-webkit转换：translateX（0）；
变换：translateX（0）；
不透明度：1
}
@仅介质屏幕和（最大宽度：767px）{
.滑块h2{
字体大小：20px；
}
.slider>div{
填充：0.2%
}
.控制标签{
字体大小：35px；
}
.滑块.按钮{
填充：0 15px；
}
}

第一张幻灯片文本
第二张幻灯片文本

要处理时间问题，必须使用javascript/jquery

您可以使用类名访问幻灯片，每7秒添加/隐藏元素，并将它们与setInterval函数一起使用

var interval = setInterval(function () {document.getElementById('previous-control').addClass('hide'); document.getElementById('next-control').addClass('show'); }, 7000);

---

如果您必须在css中使用display none和block添加隐藏和显示类

谢谢Avinash的提示，但是，由于我对javascript一点也不熟悉，我可以问您：-我假设我必须使用上述代码创建一个单独的js文件（即autoplay.js）。我怎么称呼js？在html中？-我知道我还必须使用css隐藏/显示元素slide1、slide2以及它们的文本和导航按钮。你能带我去吗？谢谢是的，您必须创建一个新的js文件，并使用script标记在html代码中使用该javascript文件