CSS 変換 3D スライド効果_JavaScript スキルを実装する手順の解釈

js

复制代码代码如下:

$(function() {
var length = $(".container a").length;
var $items = $(".container a");
$items.on("transitionend", function(event); {
$items.removeClass("trans");
});
$(".container a").each(function(index, value){
var $child = $( this);
if (index === 0) {
$child.addClass("現在表示中");
} else if (index === 1) {
$child.addClass ("左を表示");
} else if (index == 2) {
$child.addClass("out-left"); else if (index == (length - 2) ) {
$child.addClass("右表示");
} else if (index === (長さ - 1)) {
$child.addClass("右表示"); 🎜>} else {
$child.addClass("hiding")
};


$child.click(function(){
var $item = $( this);
//次のアイテム
var $nextItem = (index === (length - 1)) $items.eq(index 1); /前の項目
var $preItem = (index === 0) : $items.eq(index - 1);インデックス == 0){
$rightItem = $items.eq(length - 2);
} else if (index == 1) {
$rightItem = $items.eq(length - 1);
} else {
$rightItem = $items.eq(index - 2);
}
var $leftItem;
if(index == length - 2){
$leftItem = $items.eq(0);
} else if (index == length - 1) {
$leftItem = $items.eq(1);
} else {
$leftItem = $items.eq(index 2);
}
//現在のアイテム click,return
if ($item.hasClass("current")) {
return false;
} else if ($item.hasClass("left")) {
//中央を右に移動
$preItem.attr("class","trans right Showing");
//中心を左に移動
$item.attr("class","trans current missing");
//右項目を外側に移動
$rightItem.attr("class","trans out-right");
//次に左に移動します
$nextItem.attr("class","trans left missing");
//準備完了
$leftItem.attr("class","out-left");
} else if ($item.hasClass("right")) {
//中央を左に移動
$nextItem.attr("class","trans left Showing");
//中心を右に移動
$item.attr("class","trans current missing");
//左項目クリア
$leftItem.attr("class","trans out-left");
//前に右に移動
$preItem.attr("class","trans right missing");
//準備完了
$rightItem.attr("class","out-right");
};
});
});
});



html

复制代码

代码如下: