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

你在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
                });
        });

或包装滑块类

周围的div滑块

Answer 2

您正在标题中初始化#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;
}

无法让Nivo滑块工作

2 个答案: