0

これまでの私のコードは次のとおりです。いくつか質問があります。

1) トランジションをスムーズにするにはどうすればよいですか? すべての写真を正しく整列させることはできません。空白がないように、画像を右の画像のちょうど左にジャンプさせる方法はありますか (左にスクロールしているため)。

2) リーチ エリア タグの上にポップアップを作成したい (写真のさまざまなセクションにマウスを合わせると、スクローラーが停止し、その特定のエリアに別の色でポップアップが表示されます)。これを行う最善の方法は何ですか？

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            // when the DOM/elements load, start
            var readyStateCheckInterval = setInterval(function() {
                if (document.readyState === "complete") {
                    init();
                    clearInterval(readyStateCheckInterval);
                }
            }, 10)
            paused = false;
        function init() {
            setInterval(wells_fancy_slider, 50);
            $('area').hover(function() {
                console.log(this);
                paused = true;
            }, function() {
                paused = false;
            })
        }

        function wells_fancy_slider() {
            if (!paused) {
                if (parseInt($('#pic1').css('left')) < -2800) {
                    $('#pic1').css('left', '5596');
                }
                if (parseInt($('#pic2').css('left')) < -2800) {
                    $('#pic2').css('left', '5596');
                }
                if (parseInt($('#pic3').css('left')) < -2800) {
                    $('#pic3').css('left', '5596');
                }
                $('#pic1, #pic2, #pic3').css('left', '-=15');
            }
        }


    </script>
    <style>
        body{
            min-width: 960px;
            background-color:blue;
        }
        #container{
            overflow: hidden;
            /*width: 6000px;*/
            height: 500px;
            position: relative;
            text-align: center;
            margin-top:-8px;
        }
        #pic1{
            position:absolute;
            left:570px;
        }
        #pic2{
            position:absolute;
            left:3315px;
        }
        #pic3{
            position:absolute;
            left: 6110px;
        }
    </style>
</head>
<body>
    <div style="position:absolute; width: 20%; z-index: 1000; float: left; height: 450px; left:0px; background-color:black;"></div>
    <div style="position:absolute; width: 20%; z-index: 1000; float: right; height: 450px; right:0px; background-color:black;"></div>

    <div id="container">
        <div style="text-align:center; width:2798px; margin-left:auto; margin-right:auto;">
            <img id="pic1" src="LMDay.jpg" usemap="img_map" border="0" width="2798" height="450" alt="" />
            <img id="pic2" src="LMDay.jpg" usemap="img_map" border="0" width="2798" height="450" alt="" />
            <img id="pic3" src="LMDay.jpg" usemap="img_map" border="0" width="2798" height="450" alt="" />

            <map id="img_map" name="img_map">
                <area shape="rect" coords="3,69,413,445" href="http://www.image-maps.com/" alt="1" title="1"    />
                <area shape="rect" coords="413,73,692,443" href="http://www.wellsjohnston.com/" alt="2" title="2"    />
                <area shape="rect" coords="692,91,919,440" href="http://www.image-maps.com/" alt="3" title="3"    />
                <area shape="rect" coords="917,102,1135,440" href="http://www.wellsjohnston.com/" alt="4" title="4"    />
                <area shape="rect" coords="1134,103,1363,441" href="http://www.image-maps.com/" alt="5" title="5"    />
                <area shape="rect" coords="1360,107,1591,438" href="http://www.wellsjohnston.com/" alt="6" title="6"    />
                <area shape="rect" coords="1589,96,1872,438" href="http://www.image-maps.com/" alt="7" title="7"    />
                <area shape="rect" coords="1871,100,2072,439" href="http://www.wellsjohnston.com/" alt="8" title="8"    />
                <area shape="rect" coords="2072,116,2272,436" href="http://www.image-maps.com/" alt="9" title="9"    />
                <area shape="rect" coords="2270,70,2597,433" href="http://www.wellsjohnston.com/" alt="10" title="10"    />
                <area shape="rect" coords="2595,78,2784,430" href="http://www.image-maps.com/" alt="11" title="11"    />
            </map>
        </div>
    </div>
    <div style="background-color:red; width:100px; height:100px; margin-top:2000px;">
        ay
    </div>
</body>

4

1 に答える 1

2

個々の画像を移動する代わりに、すべての画像を含む要素を作成して移動する必要があります。

私は通常、画像スライダーを使用して次のようなことを行います。

メインスライダー：

  • サイズを設定する
  • オーバーフロー：非表示
  • 比較的配置されている

画像コンテナ：

  • 999999px幅（float：leftが機能するように）
  • 絶対に配置

画像：

  • メインスライダーと同じサイズ
  • float：left

画像コンテナのプロパティのみを移動すると、描画サイクルが節約され、コードの記述が少なくleftなり、空白の不具合が発生しなくなります。

また、オプションの場合は、CSS3トランジションを使用する必要があります。古いブラウザでは、画像が次のスライドにジャンプするだけですが、最近のブラウザでは、現在Webで可能な移行がスムーズになります。さらに、プレゼンテーションにJavascriptを使用する必要はありません。これは、とにかく実際に行うべきではありません。

于 2012-11-22T13:41:19.127 に答える