在我的网站[基于wordpress]中,我有一个项目滑块(技术上带有一些文字的图像).但是该滑块不是自动滚动,有一个左右滑动的按钮.
http://i47.tinypic.com/97uxz4.jpg
我想删除该按钮并使其自动滑动.我不想使用任何JavaScript.我想用CSS完成.有可能,如果是,那么如何?
如果不可能,最简单的解决方案是什么,
这是我的工作网站
解决方法
1.)您无法使用CSS或纯HTML启动DOM操作.你总是需要一种操纵语言(比如JavaScript)
2.)您可以通过覆盖当前CSS来删除按钮,并调整可见性或显示标记以使其脱离或(占位)不可见.
最后,你真的需要JavaScript才能触发动态隐藏,并使用setIntervals进行自动滑动.
编辑:
这可能适合您使用滑块动画:
#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的版本.这些是其他浏览器的等价物:
@关键帧:
@-moz-keyframes move { @-o-keyframes move { @keyframes move {
-moz-animation-name: move; -o-animation-name: move; animation-name: move;