jquery imagecube 新手帮助

Question

嘿，我是新来的，对与网页设计和编码相关的一切都很陌生，所以也许我有一些愚蠢的问题，但仅此而已！，也对我的英语感到抱歉 - 希望你能理解我要说的话。

我在这个 ImageCube http://keith-wood.name/imageCube.html 上工作，但我会喜欢用拇指滚动条把它做成这样的 http://www.cancan.ro/ 。

我知道要让这件事像这样工作，所以如果你知道更好的方法，请告诉我。

无论我在 html 或 javascript 中放入什么值，似乎都无法正常工作。 例如，在下面的情况下，所有拇指都会从文档中获取第一个值，在这种情况下为“0”，即 uluru.jpg。所以，换句话说（在这种情况下，从下面开始）每当我单击无论哪个拇指，立方体都会重复旋转乌鲁鲁图像。

那么，如何为每个拇指 img id 分配相应的值，以便像拇指滚动条一样发挥作用？

我也收到了作者的这个回答

您可以使用 afterRotate 回调 当立方体旋转时收到通知 然后可以更新指针 缩略图列表。您可以使用 “旋转”命令打开立方体 对上一个/下一个按钮的需求， 单击缩略图即可 显示该图像。请参阅示例 示例代码的网站。

我似乎找不到如何使用 afterRotate 回调并更新指针。

因此，如果您能帮助我，我将非常感激，如果您有其他想法，请给我完整的代码，因为就像我说的，我对这个领域的所有人都很陌生。

这是我的代码

代码：

<div id="directionCube" class="cube">

            <img src="img/uluru.jpg" >
            <img src="img/islands.jpg" >
            <img src="img/gorge.jpg" >
        </div>




            <input id="direction" value="left" type="hidden"> <input id="current" option value='0' type="hidden" /> <img id="thumb1" src="1_thumb.jpg">

          <script type="text/javascript">
        $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

        $('#thumb1').click(function() {
            var cube = $('#directionCube');
            var current = parseInt($('#current') .val(), 10);
            cube.imagecube('change', {direction:$('#direction') .val()}).
                imagecube('rotate', current, function() {
                    $('#current').text($(cube.imagecube('next')).attr('title'));
                });
        });

        </script>


       <input id="direction" value="left" type="hidden"> <input id="current"  option value='1' type="hidden" ><img id="thumb2" src="2_thumb.jpg">

    <script type="text/javascript">
        $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

        $('#thumb2').click(function() {
            var cube = $('#directionCube');
            var current = parseInt($('#current') .val(), 10);
            cube.imagecube('change', {direction:$('#direction') .val()}).
                imagecube('rotate', current, function() {
                    $('#current').text($(cube.imagecube('current')).attr('title'));
                });
        });     

        </script>


     <input id="direction" value="left" type="hidden"> <input id="current"  option value='2' type="hidden" ><img id="thumb3" src="3_thumb.jpg">

    <script type="text/javascript">
        $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

        $('#thumb3').click(function() {
            var cube = $('#directionCube');
            var current = parseInt($('#current') .val(), 10);
            cube.imagecube('change', {direction:$('#direction') .val()}).
                imagecube('rotate', current, function() {
                    $('#current').text($(cube.imagecube('current')).attr('title'));
                });
        });     

        </script>

Answer 1

您应该在 Three.js 中使用交互式界面。您最终将对任何 3D 事物拥有更多控制权，除非您害怕在 jQuery 之外进行编码。他们有canvas和webGL渲染器。