1.滑块动画shema n1
2.滑块动画shema n2
想象一下，有两个滑块一个接一个。两者同步移动，向同一侧移动。第一个以惯性移动，伸展，底部的（主要的）从头开始移动。
3.这就是它在浏览器中的样子
4. 这是我目前所取得的成就
HTML
<div id="ghostCarousel">
<div id="content">
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
</div>
<div class="bg-block"></div>
<div id="gcNav"> <a href="#" class="left"></a>
<a href="#" class="right"></a>
</div>
CSS
html, body {
padding:0;
margin:0;
}
#ghostCarousel {
overflow: hidden;
/*position: relative;*/
}
#ghostCarousel #content > div {
width: 820px;
height: 330px;
float: left;
position: relative;
/* nuemus padding reikia padding ploti nustatyt i 0*/
padding-left:15px;
padding-right: 15px;
/*z-index: 99;*/
}
#ghostCarousel #content > div > img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
/*z-index: 99;*/
}
#content .active {
z-index: 9999;
}
#content .active img {
/*background: #FFF;*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
-webkit-filter: grayscale(0%) !important;
}
.bg-block {
width:880px;
height: 500px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -440px;
background: #FFF;
/*z-index: 100;*/
}
#gcNav {
width: 960px;
position: absolute;
top: 135px;
left: 50%;
/* move the left edge to the center … */
margin-left: -480px;
/* … and move it to the left half the box’ width. */
/*z-index: 9999;*/
}
#gcNav a {
display: block;
width: 40px;
height: 80px;
background: url("http://bisonai.infoaleja.lt/wp-content/themes/bisonai/img/controls.png") no-repeat;
}
#gcNav .left {
background-position: 0 0;
float: left;
}
#gcNav .right {
background-position: -40px 0;
float: right;
}
JS
$(function () {
var content = '#ghostCarousel #content';
var section = content + ' > div';
var v = $(window).width();
var w = $(section).width();
var c;
var itemuKiekis = $('#content div').length;
var vidurinioNr;
var paddingPlotis = 30;
var itemuSarasas = [];
function ghostCarousel() {
for (var i = 1; i <= itemuKiekis; i++) {
itemuSarasas[i] = $('#content div:nth-child(' + (i) + ')').html();
$('#content h3').hide();
$('#content p').hide();
//console.log(itemuSarasas[i]);
}
if (itemuKiekis % 2 === 0) {
c = ((w + paddingPlotis) * $(section).length - v + w) / 2;
vidurinioNr = itemuKiekis / 2 + 1;
var index = 1;
for (var i = vidurinioNr; i <= itemuKiekis; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
$('#content div:nth-child(' + index + ')').html(itemuSarasas[i]);
console.log("i:" + i + " index:" + index);
index++;
}
for (var i = 1; i <= vidurinioNr; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
console.log("i:" + i + " index:" + index);
index++;
}
} else {
c = ((w + paddingPlotis) * $(section).length - v) / 2;
vidurinioNr = (itemuKiekis + 1) / 2;
var index = 1;
for (var i = vidurinioNr; i <= itemuKiekis; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
//console.log("i:" + i);
index++;
}
for (var i = 1; i < vidurinioNr; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
console.log("i:" + i);
index++;
}
}
$('#content div:nth-child(' + vidurinioNr + ')').attr("class", "active");
console.log("v:" + v);
console.log("w:" + w);
console.log("c:" + c);
console.log("itemuKiekis:" + itemuKiekis);
console.log("vidurinioNr:" + vidurinioNr);
//TODO: keisti ilgi kad tilptu visos ft, jei netelpa
$(content).width((w + paddingPlotis * 2) * $(section).length);
$(content).css('margin-left', -c);
$('#gcNav a.left').click(function (e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$('#content .active h3').fadeOut();
$('#content .active p').fadeOut();
$('#content div:nth-child(' + (vidurinioNr + 1) + ')').attr("class", "active");
$('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");
$(content).animate({
marginLeft: '-=' + w
}, 500, function () {
var first = $(section).eq(0);
$(section).eq(0).remove();
$(this).animate({
marginLeft: '+=' + w
}, 0);
$(this).append(first);
$('#content .active h3').fadeIn();
$('#content .active p').fadeIn();
});
});
$('#gcNav a.right').click(function (e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$('#content .active h3').fadeOut();
$('#content .active p').fadeOut();
$('#content div:nth-child(' + (vidurinioNr - 1) + ')').attr("class", "active");
$('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");
$(content).animate({
marginLeft: '+=' + w
}, 500, function () {
var end = $(section).length - 1;
var last = $(section).eq(end);
$(section).eq(end).remove();
$(this).animate({
marginLeft: '-=' + w
}, 0);
$(this).prepend(last);
//$('#content div:nth-child(' + vidurinioNr + ')').attr("class","active");
$('#content .active h3').fadeIn();
$('#content .active p').fadeIn();
});
});
}
ghostCarousel();
$(window).resize(function () {
v = $(window).width();
w = $(section).width();
c = ((w + paddingPlotis) * $(section).length - v) / 2;
$(content).css('margin-left', -c);
});
});
工作 jsfiddle 示例 - http://jsfiddle.net/V9RyW/
如果你检查小提琴，你会看到图片在点击时变成一条直线并一张一张地走。此外，传入的照片会获得“活动”类。
如何修改代码，n1 方案中第 3 和第 5 幻灯片的 1/3 将隐藏在 4 后面？
另外，如何在shema n2中实现动画？