Javascript CSS/HTML：如何在整版JS上设置自定义箭头？

我正在使用fullpageJS制作我的网站。 但是，尝试更改箭头样式时：

.controlArrow.prev{
左：50px；
背景：url（left.png）；
背景重复：无重复；
}
.controlArrow.next{
右：50px；
}

它不起作用，有人能解释为什么吗

---

或者，有没有办法添加自定义箭头html标记？

首先，下载插件的最新版本（及其CSS文件）。Fullpage.js不再使用

controlArrow

，而是使用

fp controlArrow

确保在包含

jquery.fullpage.css

之后添加自己的样式，这样就可以重写插件样式。 此外，请确保覆盖默认情况下应用的所有样式

考虑到当前箭头由

边框

属性构成。不是任何

背景下的
。
您需要替换这些样式，甚至更改
宽度
和
高度

如果您查看
jquery.fullpage.css
，您将看到需要重写的样式

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}

扩展@Alvaro的答案，您只需将默认边框箭头替换为图像，如下所示：

.fp-controlArrow.fp-prev {
    left: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(left.png) no-repeat;
    cursor: pointer;
}
.fp-controlArrow.fp-next {
    right: 0;
    border: none;
    width: 50px;
    height: 101px;
    background: url(right.png) no-repeat;
    cursor: pointer;
}

我想使用字体可怕的箭头图标，但不知道该怎么办。但随后我研究了fuulpage.js初始化后html标记中所做的更改：

原始html标记


使用Raptor对CSS中更改的问题的回答，我发现默认情况下可以通过在初始化fullpage（）的脚本中添加两行来向元素添加新的自定义元素。请不要这样做，因为fullpage似乎不会在其原始元素上委派单击事件，一旦添加了新的元素，您就必须重新分配

脚本中的更改
$（文档）.ready（函数（）{
$（'#fullpage'）。fullpage（）；
//所做的更改
$（'.fp prev'）。追加（''）；
$（'.fp next'）。追加（''）；
//要获得事件控制，请单击事件委派
$（'.fp prev'）。on（'click'，function（）{fullpage_api.moveSlideLeft（）；}）；
$（'.fp next'）。on（'click'，function（）{fullpage_api.moveSlideRight（）；}）；
});

结果是：

最终html标记
我只是想更改箭头的颜色-因此，如果您只想这样做，您可以使用以下css将其更改为黑色（或任何颜色）：

.fp-controlArrow.fp-next { border-color: transparent transparent transparent black }
.fp-controlArrow.fp-prev { border-color: transparent black transparent transparent }

希望这对别人有帮助
 您可以使用中的图标添加自定义箭头
并将其添加到fullPage.js中：-

new fullpage("#fullpage", {
/* fill up the required options*/
afterRender: function () {
        /** arrow-left */
        const arrow_left = document.querySelector(".fp-controlArrow.fp-prev");
        arrow_left.innerHTML = `<i class="fas fa-chevron-left"></i>`;
        /** arrow-right */
        const arrow_right = document.querySelector(".fp-controlArrow.fp-next");
        arrow_right.innerHTML = `<i class="fas fa-chevron-right"></i>`;
    }
}

您还可以简单地禁用默认箭头、添加您的箭头和添加js事件（以及您自己的css）：


[您的箭头代码/图像]
[您的箭头代码/图像]
幻灯片1
幻灯片2
幻灯片3
幻灯片4
//最好是在domready上或在页脚中
新建整页（“#整页”{
controlArrows:false，//禁用箭头
});
$（'.fp custom arrow.prev'）。on（'click'，function（）{fullpage_api.moveSlideLeft（）；}）；
$（'.fp custom arrow.next'）。on（'click'，function（）{fullpage_api.moveSlideRight（）；}）；

<div class="fp-controlArrow fp-prev">
    <span class="fa fa-angle-left"></span>
</div>
<div class="fp-controlArrow fp-prev">
    <span class="fa fa-angle-right"></span>
</div>

.fp-controlArrow.fp-next { border-color: transparent transparent transparent black }
.fp-controlArrow.fp-prev { border-color: transparent black transparent transparent }

new fullpage("#fullpage", {
/* fill up the required options*/
afterRender: function () {
        /** arrow-left */
        const arrow_left = document.querySelector(".fp-controlArrow.fp-prev");
        arrow_left.innerHTML = `<i class="fas fa-chevron-left"></i>`;
        /** arrow-right */
        const arrow_right = document.querySelector(".fp-controlArrow.fp-next");
        arrow_right.innerHTML = `<i class="fas fa-chevron-right"></i>`;
    }
}

/* left-slider-arrow */
  .fp-controlArrow.fp-prev {
    border: none;
    width: 50px;
    height: 101px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* right-slider-arrow */
  .fp-controlArrow.fp-next {
    border: none;
    width: 50px;
    height: 101px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

<div class="section">
  <button class="fp-custom-arrow left">[your arrow code/image]</button>
  <button class="fp-custom-arrow right">[your arrow code/image]</button>

  <div class="slide" data-anchor="slide1"> Slide 1 </div>
  <div class="slide" data-anchor="slide2"> Slide 2 </div>
  <div class="slide" data-anchor="slide3"> Slide 3 </div>
  <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

// ideally on domready or in footer
new fullpage('#fullpage', {
  controlArrows: false, // arrows disabled
});

$('.fp-custom-arrow.prev').on('click', function(){ fullpage_api.moveSlideLeft(); });
$('.fp-custom-arrow.next').on('click', function(){ fullpage_api.moveSlideRight(); });