1

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

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：链接

CSS：链接

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

我使用了这个网站链接的 Javascript 和 CSS

4

2 回答 2

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

于 2013-07-22T18:22:51.247 回答
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;
}
于 2013-07-22T18:23:03.897 回答