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:0px为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 回答