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 に答える