日期:2014-05-17  浏览次数:20612 次

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"/>