HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-02-26 14:01 我要评论( )

!DOCTYPE htmlhtmlhead lang="en"meta charset="UTF-8"title/titlestyle 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

<!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)">&lt;</a> <a href="javascript:void(0)">&gt;</a> </ul> </body> </html>

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    2016-12-17 10:01

  • 一分钟搞定AlloyTouch图片轮播组件 - 【当耐特】

    一分钟搞定AlloyTouch图片轮播组件 - 【当耐特】

    2016-12-12 14:01

  • 自己写的HTML5 Canvas + Javascript五子棋 - 氢氦

    自己写的HTML5 Canvas + Javascript五子棋 - 氢氦

    2016-10-31 13:00

  • 使用js制作一般网站首页图片轮播效果 - 骑猪敲代码

    使用js制作一般网站首页图片轮播效果 - 骑猪敲代码

    2016-08-30 16:00

网友点评
r