Question

我正在尝试在我的网站上添加一个犀牛滑块，它将以全屏大小淡入和淡出多个图像。我正在使用的犀牛滑翔机是：Rhinoslider我可以得到这个滑块的工作方式，但这样做会将滑块下面的其他分区推到页面下方，而不应该是它们。

代码：

HTML：

<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/rhinoslider-1.05.css" type="text/css"  />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
        <script type="text/javascript" src="js/mousewheel.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').rhinoslider({
                    effect: 'fade',
                    controlsMousewheel: false,
                    controlsKeyboard: false,
                    controlsPrevNext: false,
                    controlsPlayPause: false,
                    autoPlay: true,
                    pauseOnHover: false,
                    showBullets: 'never',
                    showControls: 'never'
                });
            });
        </script>
</head>
<body>
<div class="CVHeader">
            <ul id="slider">
                <li><img src="images/CVHeader.jpg"/></li>
                    <li><img src="images/hmb-header-image.jpg"/></li>
                </ul> 
        </div>

 <div id="expertisediv">

        <div class="largeshape1">

            <img src="images/largeshape1.jpg"/>

        </div>
 </div>
</body>

主要CSS：

.CVHeader {
    width:100%;
    height:auto;
    }

    #slider li { 
    list-style:none;
    }

    #slider{ 
    width:100%;
    height:auto;
    padding:0;
    margin:0;
    }

#expertisediv {
    width:100%;
    height:auto;
    background-color:#FFFFFF;
    padding-bottom:8%;
    float:left;
    }

    .largeshape1 {
    width: 19.3%;
    height:auto;
    min-height: 120px;
    max-height:auto;
    padding-top:4.5%;
    float:left;
    }

任何帮助表示感谢。

Answer 1

以上是您的代码的快速小提琴，显然使用了一些不同的图像。

我只能假设你的页面某处的滑块或其他代码破坏了网站，因为你可以在这里看到，较低的DIV没有被推下那么远，只是你在CSS中指定的填充％。

padding-top:4.5%;

http://jsfiddle.net/1g8gha62/

也许尝试将该填充值编辑为特定像素值而不是百分比？只是一个想法。

无法使用带有整页图像的rhino滑块

1 个答案: