Question

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

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

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

如果不可能，最简单的解决方案是什么，这是我的工作地点

http://aniyanetworks.net/Blog

Answer 1

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

2。）您可以通过覆盖当前的CSS来删除按钮，并调整visibility或display标记以将其移除或（占位）隐藏。

最后，您真的需要JavaScript来触发动态隐藏，并使用setInterval进行自动幻灯片。

<强> 编辑：

这可能适合您使用滑块动画处理：

#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;

Answer 2

以下是使用animations的示例（Fiddle）。您可以将其应用于.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的答案。

但当然你必须要玩。这应该只是它如何发挥作用的暗示。

Answer 3

以下是在有限和无限元素宽度中自动滚动的示例：

/*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>

Answer 4

你无法用css做很多动画。 JavaScript是要走的路。我也试图抓住它... Goodluck给你。

使用CSS自动滚动

4 个答案: