使用CSS自动滚动 [英] Auto scrolling with CSS
问题描述
在我的网站[基于wordpress]，我有一个项目滑块（技术上有一些文字的图像）。但是该滑块不是自动滚动的，有一个用于左右滑动的按钮。
In my website [based on wordpress] , I have a project slider (technically image with some text) . But that slider is not auto scrolling , there is a button for sliding left and right .
http://i47.tinypic.com/97uxz4.jpg
我要移除该按钮，让它滑动自动。我不想使用任何javascript。我想用CSS完成。是否可能如果是，那么如何？
I want to remove that button and make it sliding auto . I don't want use any javascript . I want to accomplish with CSS . Is it possible if yes then how ?
如果不可能，最简单的解决方案是什么，
这是我的工作网站
If it is not possible what is the shortest possible solution to do this , Here is my working site
推荐答案
1。）您不能使用CSS或纯HTML启动DOM操作。您总是需要一个操作语言（如JavaScript）
1.) You can't initiate DOM actions with CSS or pure HTML. You always need a manipulating language (like JavaScript)
2。）您可以通过覆盖当前CSS并删除 visibility 或显示标签以将它们移除或（占位符）不可见。
2.) You can remove the buttons by overwriting the current CSS and adjust the visibility or display tag to render them away or (placeholding) invisible.
确实需要JavaScript来触发动态隐藏，并通过 setInterval 来实现自动滑动。
In the end you really need JavaScript for this to trigger dynamic hiding and to make the automatic slide happen with setIntervals.
这可能是让您使用滑块动画处理：
This might be something for you to work with animating the slider:
#container {
height: 200px;
width: 800px;
border: 1px solid #333;
overflow: hidden;
margin: 25px auto;
}
#box {
background: orange;
height: 180px;
width: 400px;
margin: 10px -400px;
-webkit-animation-name: move;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: right;
-webkit-animation-timing-function: linear;
}
#box:hover {
-webkit-animation-play-state: paused;
}
@-webkit-keyframes move {
0% {
margin-left: -400px;
}
100% {
margin-left: 800px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main2.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="box">as</div>
</div>
</body>
</html>
这是仅限WebKit的版本。这些是其他浏览器的等效项：
This is the WebKit-only version. These are the equivalents for other browsers:
@ 关键帧：
@-moz-keyframes move {
@-o-keyframes move {
@keyframes move {
内部 #box （仅显示一个属性作为示例）：
Inside #box (only one property shown as example):
-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;
这篇关于使用CSS自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
