Question

我在弄清楚如何添加页面（幻灯片）时遇到了一些麻烦，插件附带了四个，但我需要大约6页。

我是否需要摆弄jquery元素，还是可以通过css和html完成？

提前致谢！

Answer 1

这是包含六个部分和六个幻灯片的整页示例。 jsfiddle中的示例：fiddle

HTML

<div class="section active" id="section0"><h1>Section 0</h1></div>
<div class="section" id="section1">
    <div class="slide">
        <h1>Slide 1.js</h1>
        <span class="toSlide" data-index="3">Click here to go to slide 3</span>
    </div>

    <div class="slide">
        <h1>Slide 2</h1>
        <span class="toSlide" data-index="1">Click here to go to slide 1</span>
    </div>

    <div class="slide">
        <h1>Slide 3</h1>
    </div>

    <div class="slide">
        <h1>Slide 4</h1>
    </div>

     <div class="slide">
        <h1>Slide 5</h1>
    </div>


     <div class="slide">
        <h1>Slide 6</h1>
    </div>
</div>
<div class="section" id="section2"><h1>Just testing section2</h1></div>
<div class="section" id="section3"> <h1>Looks good section3</h1></div>
<div class="section " id="section4"> <h1>Looks good section4</h1></div>
<div class="section " id="section5"> <h1>Looks good section5</h1></div>

CSS

body{
    color: #fff;
}
h1{
    font-size:3em;
}
.section {
    text-align: center;
}
.section, .slide{
    background-color:#444;
}
#section0{
    background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
    background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
    background: linear-gradient(#4BBFC3,#7BAABE);
}
#section1{
    background: -webkit-gradient(linear, top left, bottom left, from(#7baabe), to(#969ac6));
    background: -webkit-linear-gradient(#7BAABE, #969AC6);
    background: linear-gradient(#7BAABE,#969AC6);
}
#section2{
    background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#92a1ca));
    background: -webkit-linear-gradient(#969AC6, #92A1CA);
    background: linear-gradient(#969AC6,#92A1CA);
}
#section3{
    background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd));
    background: -webkit-linear-gradient(#92A1CA, #76C2BD);
    background: linear-gradient(#92A1CA,#76C2BD);
}

的javascript

$.fn.fullpage();

Fullpage.js - 添加页面

1 个答案: