无法让 Nivo 滑块工作

Question

我想在此页面上集成一个 nivo 滑块Link 幻灯片应该进入页面顶部的屏幕。目前我很难将滑块图像放入屏幕图像中。

HTML：

<div class="top" >
<img src="screen.png" style="margin-top: 0px; margin-bottom: 10px; " /> 
        <div class="slider">
            <img src="slide-1.png" alt=""  />
            <img src="slide-2.png" alt=""  />
            <img src="slide-3.png" alt=""  />
    </div>              
</div>

CSS：

#content { height: 800px; width: 1000px; float: left; display: block; margin-top: 20px; }
#content .top { width: 1000px; height: 300px; display: block; float: left; position: relative; margin-left: 20px; margin-top: 20px; }
#content .text3 { width: 200px; display: inline-block; margin-left: 20px; }
#content .text4 { width: 300px; height: 90px;margin-bottom: 10px; }
#content .face { width: 300px; height: 300px; display: block; float: left; position: relative; margin-top: 20px; }
#content .bottom { width: 1000px; height: 400px; display: block; float: left; position: relative; margin-left: 0px; margin-top: 45px; }
#content .box1 { width: 236px; height: 350px; background:url(box1.png) no-repeat; display: block; float: left; position: relative; margin-left: 0px; margin-top: 20px; }
#content .box2 { width: 236px; height: 350px; background:url(box2.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box3 { width: 236px; height: 350px; background:url(box3.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box4 { width: 236px; height: 350px; background:url(box4.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .slider { width: 360px; height: 235px; margin-left: 60px; margin-top: 40px; overflow: hidden; }

这是我的全部代码：

HTML：Link

CSS：Link

应该怎样做才能让 nivo 滑块正常运行？

我使用了来自该站点Link的Javascript和CSS

Answer 1

您在标头中初始化 #slider，但 div 是 class="slider" 将其更改为 ID 或将 id 切换为正确的类

/** 已编辑 **/

将您的 CSS 更改为：

#content .slider {
width: 350px;
height: 235px;
margin-left: 60px;
margin-top: 40px;
overflow: hidden;
position: absolute;
top: 12px;
right: 133px;
}

Answer 2

您在 js 中通过 id 调用 nivo 滑块，而您仅在 html 中使用 css 类 用这个

$(window).load(function() {
                $('.slider').nivoSlider({
                        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
                        animSpeed: 500, // Slide transition speed
                        pauseTime: 6000, // How long each slide will show
                        startSlide: 0, // Set starting Slide (0 index)
                        controlNav: true, // 1,2,3... navigation
                        directionNav: false, // Next & Prev navigation
                        pauseOnHover: true // Stop animation while hovering
                });
        });

或者在滑块类周围包裹一个名为slider的div