$(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 itemvar $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,returnif ($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"/></a><a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-KvNsoffzejc/UVJO1LRTnoI/AAAAAAAAACU/Nv7yH95zqFo/s1038/5.jpg" alt="6"/></a><a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-T31bgnUYzeA/UVJO3B3VHCI/AAAAAAAAACw/TOpCZ0zJfZ0/s1038/6.jpg" alt="7"/></a><a href="javascript:void(0)"><img src="https://lh5.googleusercontent.com/-tvR6IES_W9I/UVJO4HZYM8I/AAAAAAAAAC8/9yzl4C4qtm8/s1038/7.jpg" alt="8"/></a><a href="javascript:void(0)"><img src="https://lh5.googleusercontent.com/-Li5wNWZ6BOI/UVJO3ZdRYDI/AAAAAAAAAC0/Nk_JSi8fJtQ/s1038/8.jpg" alt="9"/></a><a href="javascript:void(0)"><img src="https://lh6.googleusercontent.com/-mig_PoX_wtM/UVJO5NrvmZI/AAAAAAAAADE/GI3o24bq3eY/s1038/9.jpg" alt="10"/></a></div></div><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript" src="slide.js"></script></body></html>
css
body,div{margin: 0;padding: 0;}.container{width: 100%;height: 450px; position: relative;}.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;}.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;}.container a img{width: 480px;height: 300px;display: block;border: 0;}.container .current{z-index: 2;}.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}.showing{opacity: 1;visibility: visible;}.hiding{opacity: 0;visibility: hidden;}.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;}.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;}.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
demodemo代碼改良js代碼冗餘太多，精簡後好多了。前面的代碼完全不能看
var current = 0;var length = $(".container a").length;var $items = $(".container a");$(function(){//not current left right item set hidden$(".container a:gt(1):lt(" + (length - 1) + ")").addClass("hiding");setItem();$(".container a").bind("click",function(){var $item = $(this);if ($item.hasClass("left")) {if (current < length - 1) {current ++;} else {current = 0;};} else if ($item.hasClass("right")) {if (current > 0) {current --;} else {current = length - 1;};};setItem();});$items.on("transitionend", function(event){$items.removeClass("trans");});});var setItem = function(){//current itemvar $current = $items.eq(current);//left item var $leftItem = (current === (length - 1)) ? $items.eq(0) : $items.eq(current + 1);//left item indexvar leftItemIndex = (current === (length - 1)) ? 0 : (current + 1);//right itemvar $rightItem = (current === 0) ? $items.eq(length - 1) : $items.eq(current - 1);//right item indexvar rightItemIndex = (current === 0) ? (length - 1) : (current - 1);//left 2 item,ready to showvar $leftOutItem = (leftItemIndex === (length - 1)) ? $items.eq(0) : $items.eq(leftItemIndex + 1);//right 2 item,ready to showvar $rightOutItem = (rightItemIndex === 0) ? $items.eq(length - 1) : $items.eq(rightItemIndex - 1);//current move$current.attr("class","trans current showing");//left move$leftItem.attr("class","trans left showing");//left 2 move$leftOutItem.attr("class","trans out-left");//right move$rightItem.attr("class","trans right showing");//right 2 move$rightOutItem.attr("class","out-right");};Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
