0

カスタム jQuery スライダーを作成しています。これが私のコードです：

<head>
    <style>
        p { 
            color: red; 
            margin: 5px; 
            cursor: pointer;
        }
        p:hover { 
            background: yellow; 
        }
        img { 
            position: absolute; 
            top: 0px; 
            left: 0px;
        }
        #img1 {
            width: 652px; 
            height: 314px; 
            position: absolute; 
            top: 0px; 
            left: 0px; 
            z-index: 999999;
        }
        #img2 {
            width: 652px;
            height: 314px;
            position: absolute; 
            top: 0px; 
            left: 0px; 
            z-index:99;
        }
        #content {
            height: 350px; 
            width: 500px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="content">
        <div id="img1" style="background:url(scarf01.jpg);"></div>
        <div id="img2" style="background:url(scarf02.jpg);"></div>
    </div>

    <script>
        $(document).ready(function () {
            $('#clickme').click(function() {
                $('#img1').animate({ "width": "0px" }, 1000);  
            });
        });
    </script>

    <div id="clickme">
        Click here
    </div>
</body>

スライドをクリックする#clickme #img1と左に離れます。右にスライドさせたいです。#img1私は右に浮かぶ必要があることを読みました。これを機能させるには、位置を「相対」に設定する必要もありました。これを行うと、画像が互いに積み重なっていきます。

これを回避する方法について何か提案はありますか?

4

1 に答える 1

1

left:0pxin をに変更し、 a を好きなようright:0px;に追加position:relativeします。#content

#img1{width:652px; height:314px; position:absolute; top:0px; right:0px; z-index:999999; }
#img2{width:652px; height:314px; position:absolute; top:0px; right:0px; z-index:99;}
#content{height:350px; width:500px; position: relative}

これでうまくいくはずです。

于 2013-07-04T14:40:58.407 に答える