admin管理员组

文章数量:817353

js实现圆柱形轮播图

js实现圆柱形轮播图

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo4</title>
<style type="text/css">*{margin:0;padding: 0;}.hovertree{width: 120px;height: 180px;margin: 150px auto 0;position: relative;/*transform 旋转元素*/transform-style:preserve-3d;transform:perspective(800px) rotateX(-10deg) rotateY(0deg);transition: transform 0.5s, -webkit-transform 0.5s;transition-property: transform, -webkit-transform;transition-duration: 0.5s, 0.5s;transition-timing-function: initial, initial;transition-delay: initial, initial;}.hovertree .item{position: absolute;width: 100%;height: 100%;border-radius: 5px;box-shadow: 0px 0px 10px #fff;/*倒影的设置*//*-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);*/}.hovertree .item img{width: 100%;height: 100%;}/*.hovertree p{width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));position: absolute;top:100%;left:50%;margin-top: -600px;margin-left: -600px;border-radius:600px;transform:rotateX(90deg);}*//*.hewenqi{position:absolute;z-index:99;}*//*a{color:blue;}*/.btn-box{width: 100%;height: 200px;position: fixed;bottom: 0px;text-align: center;;}.btn{height: 50px;width: 100px;font-size: 30px;display: inline-block;border: 1px solid red;}
</style></head>
<body><div class="hovertree"><div class="item"><img src="images/1.jpg"/></div><div class="item"><img src="images/2.jpg" /></div><div class="item"><img src="images/3.jpg"/></div><div class="item"><img src="images/4.jpg"/></div><div class="item"><img src="images/5.jpg"/></div>
</div><div class="btn-box"><div class="btn1 btn">上一个</div><div class="btn2 btn">下一个</div>
</div>
<script src=".11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){var imgL=$(".hovertree .item").size();var deg=360/imgL;var roY=0,roX=-10;var xN=0,yN=0;var play=null;$(".hovertree .item").each(function (i) {//<!--translateZ 定义2d旋转沿着z轴-->$(this).css({"transform":"rotateY("+i*deg+"deg) translateZ(100px)"});//<!--防止图片被拖拽-->$(this).attr('ondragstart','return false');});$('.btn1').click(function(){roX=-10;roY+=deg;$('.hovertree').css({transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'});})$('.btn2').click(function(){roX=-10;roY-=deg;$('.hovertree').css({transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'});})// 触摸切换var carousel=document.querySelector('.hovertree');var touch;var scrollDirection;carousel.addEventListener('touchstart',function(e){// console.log('touch');touch=e.targetTouches[0];// console.log(touch);startPos = {x:touch.pageX,y:touch.pageY}scrollDirection = 0;});carousel.addEventListener('touchmove',function(e){// console.log('touchmove');if(e.targetTouches.length>1){return false;}touch=e.targetTouches[0];endPos={x:touch.pageX,y:touch.pageY};scrollDirection=endPos.x-startPos.x>0?1:-1;//1 右滑  -1 左滑 });carousel.addEventListener('touchend',function(){if(scrollDirection==-1){roX=-10;roY-=deg;$('.hovertree').css({transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'});}else{roX=-10;roY+=deg;$('.hovertree').css({transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'});}});});</script></body>
</html>

效果:

本文标签: js实现圆柱形轮播图