Question

Hy我是新来的，对于与网页设计和编码相关的所有内容都是新手，所以也许我有愚蠢的问题，但就是这样！而且对我的英语也很抱歉 - 希望你能理解我要说的话。

我在这个ImageCube http://keith-wood.name/imageCube.html上工作，但我想用thumbscroller将其设为http://www.cancan.ro/。

我知道要让这些东西只是这样，所以如果你知道一个更好的方法，就告诉我。

无论我在 html 或 javascript 中放置什么值，似乎都无法正常工作。例如，在下面的情况下，所有 thumb 从文档获取第一个值，在这种情况下为“0”，这是uluru.jpg.So，换句话说（在这种情况下来自下面）每当我点击无论哪个拇指 Cube都会反复旋转Uluru图像。

那么我怎样才能为每个拇指 img id 分配相应的值，以便像拇指滚轮一样运作？

我也收到了作者的回答

您可以使用 afterRotate 回调在立方体旋转时收到通知然后可以更新中的指针缩略图列表。你可以使用 'rotate'命令可打开多维数据集对上一个/下一个按钮的需求，并点击缩略图显示图像。请参阅示例示例代码的网站。

我似乎无法找到如何使用 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渲染器。

新手帮助jquery imagecube

1 个答案: