我一直在尝试为一组照片构建一个简单的轮播效果。将 Effects 库与 PrototypeJS 一起使用很容易，但我在理解如何使用 CSS3 实现它时遇到了问题。
我已经构建了一些解决方案，但它们只有在 HTML 中的照片顺序也是您计划导航的顺序时才有效。这里不是这种情况。
无论照片的顺序如何:
- 能够使用基于 CSS3 的规则(translateX/transition 等)为从 View 中移除事件图像设置动画
- 将其替换为在下拉菜单中选择的任何其他图像
- 它们的方向相同，由下拉菜单决定
- 他们并排出现
例如:
- 第一张照片“活跃”并且在 View 中
- 我选择“从左到右”菜单格式
- 我选择“3”作为照片编号
- 我点击“开始”
- 随着“photo”类的第一个 DIV 向右移动，第三个 DIV(“photo”类)位于其左侧，并且也是同步向右移动
一些注意事项:
- @webkit 更喜欢，但无论如何
- 布局、位置等的 CSS 故意不存在，以免妨碍任何解决方案
- 为了简单起见，我使用 PrototypeJS，你也可以，或者根本没有库，但不是 jquery(抱歉)
基于想法和建议的示例标记
我试图在此处包含示例页面的完整 html/css/js，但它在预览期间保持部分呈现，以防万一它链接在这里:
http://www.gimee.org/question.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Question</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<style>
#demo {
float: left;
width: 520px;
height: 100%;
overflow: hidden;
}
#container {
width: 3000px;
}
.photo {
float: left;
: 500px;
padding: 10px;
}
#controls {
float: left;
}
</style>
</head>
<body>
<div id="demo">
<div id="container">
<div class="active photo">
<img src="http://farm2.static.flickr.com/1161/4727417148_ed8d691aa3.jpg">
</div>
<div class="photo">
<img src="http://farm2.static.flickr.com/1013/4730980370_75cceea5be.jpg">
</div>
<div class="photo">
<img src="http://farm2.static.flickr.com/1401/4606449779_1bc79e6078.jpg">
</div>
<div class="photo">
<img src="http://farm5.static.flickr.com/4053/4690748949_db09007187.jpg">
</div>
</div>
</div>
<div id="controls">
<p>Direction:</p>
<select id="direction">
<option value="right">from Left to Right</option>
<option value="left">from Right to Left</option>
</select>
<p>Photo Number:</p>
<select id="photoNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p><a href="#" id="go">Go</a></p>
</div>
<script>
var Demo = {
run: function() {
console.log('Init');
Event.observe('go', 'click', this.go.bind(this));
},
go: function(e) {
var direction = $('direction').value;
var photoNum = $('photoNumber').value - 1;
console.log('direction:', direction, 'photoNum:', photoNum);
var container = $('container');
var photoCurrent = container.select('.active')[0];
var photoNext = container.select('.photo')[photoNum];
if (photoCurrent != photoNext) {
if (direction=="right") {
/*
Move the two photos, appearing side-by-side, from Left to Right
so that the 'Next' photo appears to push the 'Current' photo out
*/
console.log('from Left to Right');
} else {
/*
Move the two photos, appearing side-by-side, from Right to Left
so that the 'Next' photo appears to push the 'Current' photo out
*/
console.log('from Right to Left');
}
} else {
console.log("Do nothing since you're asking for the currently active photo");
}
}
};
Demo.run();
</script>
</body>
</html>
最佳答案
好的，看来我自己找到了答案。这个想法是在每次移动照片时重置位置，这样当您再次遇到它时就可以不知所措，并在 CSS3 动画之前将其移动到基于左侧或右侧的起点。
它重置了我遇到的问题的位置，但是有了基于 CSS3 动画的关键帧，我现在可以克服它。
/*
NEXT PAGE
Move INTO View from the Right side
*/
@-webkit-keyframes inFromRightAnim {
0% {
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
.inFromRight {
-webkit-animation-name: inFromRightAnim;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-transform: translateX(-100%);
}
当我循环浏览时，我仍然对顺序感到有些奇怪，但这与我的错误代码有关，而不是照片位置。
关于javascript - 任何方向的基于 CSS3 的轮播，不考虑顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3126268/