3
1.滑塊動畫瑪N1
2.滑塊動畫瑪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方案中第三張和第五張幻燈片的1/3將隱藏在4後面？
另外，如何在shema n2中實現動畫？
你的問題到底是什麼？ – raam86
我的確切問題 - 如何格式化ul，li標籤以實現滑塊結構，如照片 – Rokas
這些滑塊中的每一個應該是可拖動的，還是一個滑塊的移動會影響另一個滑塊的移動？根據所提供的圖片判斷滑塊應該如何工作尚不清楚。 –