7

在我的网站 [基于 wordpress] 中，我有一个项目滑块（技术上带有一些文本的图像）。但是那个滑块不是自动滚动的，有一个左右滑动的按钮。

http://i47.tinypic.com/97uxz4.jpg

我想删除该按钮并使其自动滑动。我不想使用任何 javascript 。我想用 CSS 来完成。如果是的话，那有可能吗？

如果不可能做到这一点的最短解决方案是什么，这是我的工作站点

http://aniyanetworks.net/博客

4

3 回答 3

11

1.) 您不能使用 CSS 或纯 HTML 启动 DOM 操作。你总是需要一种操作语言（比如 JavaScript）

2.) 您可以通过覆盖当前 CSS 来删除按钮，并调整visibility或display标记以使它们消失或（占位符）不可见。

最后，您确实需要 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 {

内部#box（仅显示一个属性作为示例）：

-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;
于 2013-03-18T19:59:18.700 回答
2

这是使用的示例（小提琴）animations。您可以将此应用于您的.post-list：

.post-list {
    animation: slide infinite 3s alternate;
}

@keyframes slide {
  0% {
    margin-left: 0px;
  }
  50% {
    margin-left: -100px;
  }
  100% {
    margin-left: -200px;
  }
}

要禁用悬停动画，请使用：

.post-list:hover {
    animation-play-state: paused;
}

不要忘记-webkit-...Allendars 回答中的供应商前缀（等等）。

但是，当然，您必须四处玩耍。这应该只是它如何工作的提示。

于 2013-03-18T20:14:59.040 回答
1

这是一个在有限和无限元素宽度下自动滚动的示例：

/*use this js if your element width is unlimited an you want to scroll in a 
constant speed. else, you dont need this js code*/
var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/80; /* 80 = scrolling speed (44px/s)*/
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"
.scroll-box{
    white-space: nowrap;
    font-size: 1.1em;
    overflow: hidden;
    padding: 20px 0;
    background-color: green;
}
.scroll-container{
  width: fit-content;
  direction: rtl; /*if you want to scroll left to right set dir to ltr */
}
#scroll-element{
  background-color: yellow;
  padding: 10px;
}

@-webkit-keyframes scroll{
  0% {
    margin-right: 0%; /*if you want to scroll left to right set margin-left*/
    
  }
  100%{
    margin-right: 100%;/*if you want to scroll left to right set margin-left*/
  }
}
<!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 class="scroll-box">
       <div class="scroll-container">
        <span id="scroll-element">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        </span>
       </div>
      </div>
    </body>
    </html>

于 2020-03-23T18:13:21.847 回答