1

嗨，我是新来的，对与网页设计和编码相关的一切都是新手，所以也许我有一些愚蠢的问题，但就是这样！，也对不起我的英语 - 希望你能明白我要说的话。

我在这个 ImageCube http://keith-wood.name/imageCube.html上工作，但我想用拇指滚动器让它像这个http://www.cancan.ro/一样。

我知道只有这样才能使这些工作，所以如果您知道更好的方法，请告诉我。

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

那么如何将对应的值分配给每个拇指img id以便像拇指滚动器一样运行？

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

您可以使用afterRotate回调在立方体旋转时收到通知，然后可以更新缩略图列表中的指针。您可以使用 “旋转”命令根据需要转动立方体以使用上一个/下一个按钮，并单击缩略图以显示该图像。有关示例代码，请参阅 Web 站点上的示例。

我似乎找不到如何使用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>
4

1 回答 1

0

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

于 2012-03-13T20:35:10.747 回答