swift 轮播图组件_web前端：原生多棱柱/无限棱柱组件，js自动生成随机轮播图

1.less

* {    margin: 0;    padding: 0;    //注意防止页面下来    body {        height: 100%;        overflow: hidden;        #wrap {            position: absolute;            width: 600px;            height: 600px;            background: url(../img/my-logo-2.png) repeat;            background-size: 50px;            border: 1px solid;            border-radius: 50%;            box-shadow: 2px 2px 5px #00CED1;            top: 50%;            left: 50%;            margin-top: -300px;            margin-left: -300px;            perspective: 100px;            //随机旋转角度//          &:hover #n-prism {//              transform: rotateY(270deg);//          }            #n-prism {                position: absolute;                width: 150px;                height: 150px;                top: 50%;                left: 50%;                margin-top: -75px;                margin-left: -75px;                //开启3D                transform-style: preserve-3d;                //避免基点也加入过渡                transition: 1s transform;                //更新基点TODO:js生成-》transform-origin: center center tan内角*150px(邻边)                div {                    position: absolute;                    width: 150px;                    height: 150px;                    border: 2px solid white;                    background: tomato;                    font: 30px/150px "微软雅黑";                    color: white;                    font-weight: bold;                    text-align: center;                    top: 50%;                    left: 50%;                    margin-top: -75px;                    margin-left: -75px;                    //背面隐藏                    backface-visibility: hidden;                    //自动生成：&:nth-child(1) {transform: rotateY(240deg);}                }            }        }    }}

2.css

* {  margin: 0;  padding: 0;}* body {  height: 100%;  overflow: hidden;}* body #wrap {  position: absolute;  width: 600px;  height: 600px;  background: url(../img/my-logo-2.png) repeat;  background-size: 50px;  border: 1px solid;  border-radius: 50%;  box-shadow: 2px 2px 5px #00CED1;  top: 50%;  left: 50%;  margin-top: -300px;  margin-left: -300px;  perspective: 100px;}* body #wrap #n-prism {  position: absolute;  width: 150px;  height: 150px;  top: 50%;  left: 50%;  margin-top: -75px;  margin-left: -75px;  transform-style: preserve-3d;  transition: 1s transform;}* body #wrap #n-prism div {  position: absolute;  width: 150px;  height: 150px;  border: 2px solid white;  background: tomato;  font: 30px/150px "微软雅黑";  color: white;  font-weight: bold;  text-align: center;  top: 50%;  left: 50%;  margin-top: -75px;  margin-left: -75px;  backface-visibility: hidden;}

3.js

/** * 多棱柱脚本 */window.onload = function() {createPrism(101);//传入的棱数：nfunction createPrism(n) {//动态调整旋转//&:hover #n-prism {        //        transform: rotateY(270deg);        //    }var wrapStyle=document.createElement("style");var wrapStyleCss="#wrap:hover #n-prism{ transform:rotateY("+(Math.random()*100)+"deg);}"wrapStyle.innerHTML=wrapStyleCss;document.head.appendChild(wrapStyle);//N边形的外角(单个)：360°/nvar outerDeg = 360 / n;//N边形的内角(单个)：180°-360°/nvar innerDeg = 180 - 360 / n;//获取节点var prismNode = document.querySelector("#wrap > #n-prism");//空div标签var prismDiv = "";//生成style样式var prismStyle = document.createElement("style");//空样式集合var prismCss = "";//获取:边长-棱长width//这的n-prism变化存在联动，需要获取到div的width//var prismLength=prismNode.offsetWidth;for(var i = 0; i < n; i++) {prismDiv += "

" + (i + 1) + "

";prismCss += "#wrap > #n-prism > div:nth-child(" +(i + 1) +"){transform:rotateY(" +(i * outerDeg) + "deg);}";}//写入页面标签prismNode.innerHTML = prismDiv;//这的n-prism变化存在联动，需要获取到div的width//var prismLength=prismNode.offsetWidth;var divWidth = document.querySelector("#wrap > #n-prism > div");var prismLength = divWidth.offsetWidth;//加入基点的更新#n-prism 和 div --》 transform-origin: center center -86.60254037844386px;//正切定理：tan30°=对边/(邻边)150px//对边=150px*tan30°=150*Math.tan(30*Math.PI/180) 这里的30为角度需要转弧度：角度*Math.PI/180prismCss += "#wrap > #n-prism{transform-origin:center center -" + (prismLength / 2 * Math.tan((innerDeg / 2) * Math.PI / 180)) + "px;}";prismCss += "#wrap > #n-prism > div{transform-origin:center center -" + (prismLength / 2 * Math.tan((innerDeg / 2) * Math.PI / 180)) + "px;}"//写入styleprismStyle.innerHTML = prismCss;//写入div样式document.head.appendChild(prismStyle);}}

4.html

N棱柱module

cevent

1234567891011121314151617

5.效果图