css transform 3D幻灯片奇效
日期：2014-05-17 浏览次数：20695 次
css transform 3D幻灯片特效
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("current showing");
} else if (index === 1) {
$child.addClass("left showing");
} else if (index == 2) {
$child.addClass("out-left");
} else if (index == (length - 2)) {
$child.addClass("out-right");
} else if (index === (length - 1)) {
$child.addClass("right showing");
} else {
$child.addClass("hiding");
};
$child.click(function(){
var $item = $(this);
//next item
var $nextItem = (index === (length - 1)) ? $items.eq(0) : $items.eq(index + 1);
//previous item
var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);
var $rightItem;
if(index == 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);
}
//current item click,return
if ($item.hasClass("current")) {
return false;
} else if ($item.hasClass("left")) {
//center move right
$preItem.attr("class","trans right showing");
//left move center
$item.attr("class","trans current showing");
//right item move out
$rightItem.attr("class","trans out-right");
//next move left
$nextItem.attr("class","trans left showing");
//left ready
$leftItem.attr("class","out-left");
} else if ($item.hasClass("right")) {
//center move left
$nextItem.attr("class","trans left showing");
//right move center
$item.attr("class","trans current showing");
//left item clear
$leftItem.attr("class","trans out-left");
//previous move right
$preItem.attr("class","trans right showing");
//right ready
$rightItem.attr("class","out-right");
};
});
});
});
html
<html> <head> <title>slideshow</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="slide.css"> </head> <body> <div class="container"> <div class="wapper"> <a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-KIgBNvrrORQ/UVJOzcGIOKI/AAAAAAAAACE/mL6ujDu-3vQ/s1038/1.jpg" alt="1" /></a> <a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-hWNOas_yOGk/UVJOzaN-dPI/AAAAAAAAACI/QJb_mj76hv0/s1038/10.jpg" alt="2" /></a> <a href="javascript:void(0)"><img src="https://lh4.googleusercontent.com/-Dop6scyA0D4/UVJOzVaYywI/AAAAAAAAACM/5RwzULHpEWQ/s1038/2.jpg" alt="3"/></a> <a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-5HrHIQyz6Ok/UVJO1golL-I/AAAAAAAAACk/hJN972jmg4g/s1038/3.jpg" alt="4"/></a> <a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-W1LBipEDZUU/UVJO1qI3kQI/AAAAAAAAACg/eeTYFiGmNgw/s1038/4.jpg" alt="5"/>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
