jquery imagecube的新手帮助答案

【问题标题】：newbie help with jquery imagecubejquery imagecube的新手帮助
【发布时间】：2011-05-26 12:00:57
【问题描述】：

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

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

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

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

那么我怎样才能为每个拇指 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>

【问题讨论】：

标签： jquery 3d cube rotation

【解决方案1】：

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

【讨论】：