时间:2021-07-01 10:21:17 帮助过:27人阅读
- [javascript]
- $(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");
- };
- });
- });
- });
- $(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]
- <html>
- <head>
- <title>slideshow</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
- <body>
- <div class="container">
- <div class="wapper">
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.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>
- <html>
- <head>
- <title>slideshow</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
- <body>
- <div class="container">
- <div class="wapper">
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
- <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.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
- [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;}
- 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;}
demo
demo