各位大牛，请问垂直的3D滚动怎么改成让它鼠标触屏滚动啊？技术渣一个，求帮忙，谢谢大家

Question

问题描述

想把下面的垂直3D滚动去掉左右按钮，改为鼠标触屏滚动

问题出现的环境背景及自己尝试过哪些方法

原来是横屏的，后来我改为竖屏的了，就差触屏滚动了

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

- html代码

<div class="htmleaf-container">
    <div id="carousel">
        <div id="container" tcc-rotation="0">
            <item><img src="img/an_endless_road_with_mountains_in_the_distance.jpg"></item>
            <item><img src="img/large_mountains_3d_model_5d4f26d6-0ea9-48f5-b187-db8bb6093155.jpg"></item>
            <item><img src="img/misty-8211.jpg"></item>
            <item><img src="img/mountain-photos-photography-inspiration-nature-scenes-006.jpg"></item>
            <item><img src="img/santa-monica-mountains-x.jpg"></item>
            <item><img src="img/tumblr_n2968t23b51qzzf87o1_500.jpg"></item>
        </div>
        
        <nav class="tc-btn-container">
            <div class="tc-next">NEXT</div>
            <div class="tc-prev">PREV</div>
        </nav>
        
    </div>
</div>

• css代码

#carousel {
    display: block;
    height: auto;
    margin: 0 auto;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    position: relative;
    top: 200px;
    width: 1200px;
}

#container {
    display: block;
    height: 100px;
    margin: 0 auto;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: center bottom 0;
    transform-origin: center bottom 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width: 200px;
    z-index: 1000;
}

item {
    display: block;
    margin: 0;
    padding: 0;
    width: 200px;
    -webkit-transform: translateZ(400px);
    -ms-transform: translateZ(400px);
    -o-transform: translateZ(400px);
    transform: translateZ(400px);
    position: absolute;
}
item img {
    width: 100%;
}

.tc-btn-container {
  display: block;
  float: left;
  height: 35px;
  margin-top: -12.5px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.tc-next {
    background-color: #333;
    color: white;
    display: block;
    float: right;
    font-size: 12px;
    padding: 10px;
    width: auto;
    cursor: pointer;
}

.tc-prev {
    background-color: #333;
    color: white;
    display: block;
    float: left;
    font-size: 12px;
    padding: 10px;
    width: auto;
    cursor: pointer;
}

- js代码

$(document).ready(function($){

    var crotation;
    var rotateto = 0;
    var itemCount = $('item').length; // count of items in corousel
    var tcItemInitialRotation = 360/itemCount;
    var tcZDistance = 200;
    
    $('item').each( function(index) {
                   
        $(this).css({
            'transform' : 'rotateX('+( tcItemInitialRotation * index )+'deg) translateZ('+tcZDistance+'px)'
        }).attr('tc-rotation', ( tcItemInitialRotation * index ) );

    });
    
    function tcRotate(tcdeg){
        $('#container').css({
            'transform'         : 'rotateX('+ tcdeg +'deg)',
            '-ms-transform'     : 'rotateX('+ tcdeg +'deg)',
            '-webkit-transform' : 'rotateX('+ tcdeg +'deg)'
        });
    }
    
    $('item').on('click', function(){
        crotation = $('#container').attr('tcc-rotation');
        var rotation = $(this).attr('tc-rotation');       
        rotateto = crotation - rotation;
        tcRotate(rotateto);
        crotation = rotateto;
    });
    
    $('.tc-next').on('click', function(){
        rotateto -= tcItemInitialRotation;
        tcRotate(rotateto);
    });
    $('.tc-prev').on('click', function(){
        rotateto += tcItemInitialRotation;
        tcRotate(rotateto);
    });
    

});

Answer 1

很简单呀，左右按钮就不说了，找到那个dom去掉就行了。
至于改成手势滑动，可以引用第三方当手势插件，或者jquery-ui好像也有这种手势插件。爸js最后面当两个click监听替换掉就行了。
不想用第三方手势插件。可以考虑自己用touchstart,touchend事件自己实现。通过touchend是当y坐标与touchstart的y坐标比对判断是上滑还是下滑。之后绑定不同的切换事件。
不过这种体验上不是太完美，应为只有当你手势结束之后，才能进行动画切换。
最完美当解决方案，搭配上touchover事件监控，在滑动过程中动态监控用户滑动当距离。按比例改变动画旋转当角度。不过这种处理较为复杂，需要对你的已有动画效果进行很大的改动
推荐第二种方案