c3和js写的切割轮播图喜欢宋仲基的妹子汉子们来，观看效果需要引入jQuery^^ - 柿子橙_H5之家

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { width: 560px; height: 380px; list-style: none; border: 1px solid gray; display: flex; position: relative; list-style: none; padding: 0; margin: 100px auto; } li{ height: 100%; position: relative; width: 50%; transform-style: preserve-3d; transition: all 1s; } ul>a { font-size: 40px; color: white; width: 50px; height: 50px; background-color: gray; text-align: center; line-height: 50px; text-decoration: none; font-weight: 900; position: absolute; transform: translateY(-25px); } li>div{ width: 100%; height: 100%; position: absolute; } ul .left{ left: -50px; top: 50%; transform: translateY(-25px); } ul .right{ right: -50px; top: 50%; transform: translateY(-25px); } .first{ background: url('imgs/01.jpg') no-repeat; transform: rotateX(0deg) translateZ(190px); } .second{ background: url('imgs/02.jpg') no-repeat; transform: rotateX(-90deg) translateZ(190px); } .third{ background: url('imgs/03.jpg') no-repeat; transform: rotateX(-180deg) translateZ(190px); } .four{ background: url('imgs/04.jpg') no-repeat; transform: rotateX(-270deg) translateZ(190px); } li:nth-child(2){ transition: all 1s .1s; } li:nth-child(2)>div{ background-position: -280px 0; } </style> <script src="js/jquery-3.0.0.min.js"></script> <script> var clickCount = 0; $(function () { $(".left").click(function () { clickCount--; $("li").css({transform:'rotateX('+clickCount*90+'deg)' }) }) $(".right").click(function () { clickCount++; $("li").css({transform:'rotateX('+clickCount*90+'deg)' }) }) }) </script> </head> <body> <ul> <li> <div></div> <div></div> <div></div> <div></div> </li> <li> <div></div> <div></div> <div></div> <div></div> </li> <a href="javascript:void(0)"><</a> <a href="javascript:void(0)">></a> </ul> </body> </html>

c3和js写的切割轮播图 喜欢宋仲基的妹子汉子们来，观看效果需要引入jQuery^^ - 柿子橙

c3和js写的切割轮播图喜欢宋仲基的妹子汉子们来，观看效果需要引入jQuery^^ - 柿子橙