easySlider 1.7如何将下一个/上一个控制按钮移动到滑块上方?

时间:2014-07-07 13:14:18

标签: jquery html css

我在easySlider 1.7中实现它很有趣我很容易想要做的唯一改变就是将下一个和前一个按钮移到滑块上方而不是下面,有关如何实现这个的任何想法吗?我'我试过把

ol#controls { margin: -30px 0 0 0 !important; } 

来自EasySlider 1.7 - How to move the number buttons on to the image?的css,但没有运气。以下是我的完整代码,我们将不胜感激。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider();
    }); 
</script>
    <style>
        body {
            margin:0;
            padding:40px;
            background:#fff;
            font:80% Arial, Helvetica, sans-serif;
            color:#555;
            line-height:180%;
        }
        #slider ul, #slider li{
            margin:0;
            padding:0;
            list-style:none;
            }
        #slider li{ 
            width:946px;
            height:auto;
            overflow:hidden; 
            }
        span#prevBtn{}
        span#nextBtn{}


    </style>
</head>
<body>

<div id="slider">
    <ul>                
        <li><img src="../Desktop/slide1.png" alt="slide1" width="946" height="555" /></li>
        <li><img src="../Desktop/slide1.png" alt="slide1" width="946" height="555" /></li>
        <li><img src="../Desktop/slide1.png" alt="slide1" width="946" height="555" /></li>
        <li><img src="../Desktop/slide1.png" alt="slide1" width="946" height="555" /></li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

将此添加到您的css,这将调整按钮的位置

        span#firstBtn {
            margin-top: -400px;
            position: absolute;
            width: auto;
        }

这适用于span#firstBtn,span#nextBtn,span#prevBtn和span#lastBtn。

希望这有助于:)