js实现圆柱形轮播图

最新推荐文章于 2022-09-12 14:51:58 发布

韩大璐

最新推荐文章于 2022-09-12 14:51:58 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： js 轮播图

本文链接：https://blog.csdn.net/weixin_41257563/article/details/81319534

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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="http://down.hovertree.com/jquery/jquery-1.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>

效果：
这里写图片描述

韩大璐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js实现圆柱形轮播图

js实现圆柱形轮播图&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt
复制链接

扫一扫

专栏目录