Я пытаюсь создать простой эффект карусели для набора фотографий. Его легко сделать с помощью библиотеки Effects с PrototypeJS, но у меня возникают проблемы с пониманием того, как реализовать это с помощью CSS3.Карусель на основе CSS3 в любом направлении Независимо от порядка
Я разработал некоторые решения, но они работали только в том случае, если порядок фотографий в HTML также является порядком, в котором вы планируете перемещаться. Это не так.
Независимо от того, из фотографий:
- Для того, чтобы иметь возможность использовать правила на основе CSS3 (translateX/перехода и т.д.), чтобы оживить удаление активного изображения из поля зрения
- Заменить его любое другое изображение, как выбрано в раскрывающемся меню
- Они оба идут в том же направлении, как определено в раскрывающемся меню
- Они оба появляются бок о бок
Например:
- Первое фото 'активный' и ввиду
- Я выбираю "слева направо" формат он меню
- Я выбираю " "как номер фотографии
- Я нажимаю" Go "
- Как 1 DIV класса «фото» движется вправо, 3 DIV (класса «фото») расположен слева от него, и также движется в синхронизации вправо
Некоторые соображения:
- @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>
Shame no jQuery - для тех, кто читает это, JQuery UI Tools может сделать это примерно за 20 секунд. http://flowplayer.org/tools/demos/scrollable/index.html – aronchick
Причина отсутствия jQuery заключается в основном потому, что (а) я бы предпочел не быть зависимым от библиотеки, но использовать PrototypeJS, если я должен (b) Я действительно очень хочу понять решение, а не скрывать его в библиотеке. – donohoe