Javascript I'；我正在尝试将上一个和下一个箭头添加到此内容滑块

目前，底部有一些圆圈可用于在幻灯片之间导航。我想在侧面添加“下一个”和“上一个”箭头，用户可以单击这些箭头向前或向后浏览幻灯片

CSS:

HTML:

JavaScript:

var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

var activeLink = 0;

for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    link.itemID = i;
}

links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();
    resetTimer();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

var timeoutID;

function startTimer() {
    timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();

function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}

function goToNextItem() {
    removeActiveLinks();

    if (activeLink < links.length - 1) {
        activeLink++;
    } else {
        activeLink = 0;
    }

    var newLink = links[activeLink];
    changePosition(newLink);
}

var links=document.querySelectorAll（“.itemLinks”）；
var wrapper=document.querySelector（“包装器”）；
var-activeLink=0；
对于（变量i=0；i

这是JSFIDLE

---

我想学习这方面的个人经验，否则我只会使用像WowSlider这样的插件。如果从头开始构建一个新的滑块更容易做到这一点，那么任何指向资源的链接都可以解释如何实现这一点。这是一种带有箭头的方法，只需调整设计即可

在HTML中，我添加了相应的箭头，在JS中，我在末尾添加了

EventListeners

和函数

goToPreviousItem（）

var links=document.querySelectorAll（“.itemLinks”）；
var wrapper=document.querySelector（“包装器”）；
document.querySelector（“#previous”）.addEventListener（'click'，goToPreviousItem，false）；
document.querySelector（“#next”）.addEventListener（'click'，goToNextItem，false）；
var-activeLink=0；
对于（变量i=0；i

#包装器{
宽度：2000px；
位置：相对位置；
左：0px；
过渡：左0.6s缓进缓出；
}
.内容{
浮动：左；
宽度：500px；
高度：300px；
空白：正常；
背景重复：无重复；
}
#外部容器{
宽度：600px；
}
#先前的{
宽度：50px；
显示：内联块；
文本对齐：居中；
浮动：左；
边缘顶部：150px；
}
#下一个{
宽度：50px；
显示：内联块；
文本对齐：居中；
浮动：对；
边缘顶部：150px；
}
#内容容器{
宽度：500px；
高度：300px；
溢出：隐藏；
显示：内联块；
}
#导航链接{
利润上限：-61px；
位置：相对位置；
文本对齐：居中；
宽度：600px；
}
#导航链接{
边际：0px；
填充：0px；
显示：内联块；
边缘顶部：6px；
}
#纳武利{
浮动：左；
文本对齐：居中；
利润率：10px；
列表样式：无；
光标：指针；
背景色：rgba（204204,0.8）；
填充：10px；
边界半径：50%；
边框：rgba（255255,0.9）1px实心；
盒影：0 0 4px#fff；
}
#Navul li:悬停{
背景色：#FFF；
盒影：0 10px#fff；
边框：rgba（255255,0.6）1px实心；
}
#Navul li.active{
背景色：rgba（156227100,0.9）；
颜色：#FFFFFF；
轮廓宽度：1px；
}
#导航链接ul li.活动：悬停{
背景色：rgba（255255,0.7）；
颜色：#FFFFFF；
盒影：0 10px#fff；
边框：rgba（255255,0.9）1px实心；
}
#第一项{
背景色：#000；
背景图像：url（“http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_c
<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div> 
</div>
 <div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-500px"></li>
        <li class="itemLinks" data-pos="-1000px"></li>
        <li class="itemLinks" data-pos="-1500px"></li>
    </ul>
</div>

var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

var activeLink = 0;

for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    link.itemID = i;
}

links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();
    resetTimer();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

var timeoutID;

function startTimer() {
    timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();

function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}

function goToNextItem() {
    removeActiveLinks();

    if (activeLink < links.length - 1) {
        activeLink++;
    } else {
        activeLink = 0;
    }

    var newLink = links[activeLink];
    changePosition(newLink);
}