我正在嘗試向此內容滑塊添加上一個和下一個箭頭

Question

當前，底部有圓圈，可用於在幻燈片之間導航。 我想將下一個和上一個箭頭添加到用戶可以單擊以在幻燈片上前進或后退的側面。

CSS：

#wrapper {
    width: 2000px;
    position: relative;
    left: 0px;
    transition: left 0.6s ease-in-out;
}
.content {
    float: left;
    width: 500px;
    height: 300px;
    white-space: normal;
    background-repeat: no-repeat;
}
#contentContainer {
    width: 500px;
    height: 300px;
    overflow: hidden;
}
#navLinks {
    margin-top:-61px;
    position:relative;
    text-align: center;
    width: 500px;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: rgba(204,204,204,0.8);
            padding: 10px;
            border-radius: 50%;
        }
            #navLinks ul li:hover {
                background-color: #FFF;
            }
            #navLinks ul li.active {
                background-color: rgba(156,227,100,0.9);
                color: #FFFFFF;

            }
                #navLinks ul li.active:hover {
                    background-color: red;
                    color:#FFF;

                }

#itemOne {
    background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
    background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
    background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
    background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}

HTML：

<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>

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

這是JSFiddle http://jsfiddle.net/stormbloom/2d0a1215/

我想從個人經驗中學習它，否則我將只使用WowSlider之類的插件。 如果通過從頭開始構建一個新的滑塊更容易做到這一點，那么任何解釋如何實現此目的的資源鏈接也將不勝感激。

Answer 1

這是一種帶有箭頭的方法，只需對設計進行調整即可。

在HTML中，我添加了相應的箭頭，在JS中，最后添加了EventListeners和函數goToPreviousItem() 。

 var links = document.querySelectorAll(".itemLinks"); var wrapper = document.querySelector("#wrapper"); document.querySelector('#previous').addEventListener('click', goToPreviousItem, false); document.querySelector('#next').addEventListener('click', goToNextItem, false); 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); } function goToPreviousItem() { removeActiveLinks(); if(activeLink == 0) { activeLink = links.length - 1; } else { activeLink--; } var newLink = links[activeLink]; changePosition(newLink); } 

 #wrapper { width: 2000px; position: relative; left: 0px; transition: left 0.6s ease-in-out; } .content { float: left; width: 500px; height: 300px; white-space: normal; background-repeat: no-repeat; } #outsideContainer { width: 600px; } #previous { width: 50px; display: inline-block; text-align: center; float: left; margin-top: 150px; } #next { width: 50px; display: inline-block; text-align: center; float: right; margin-top: 150px; } #contentContainer { width: 500px; height: 300px; overflow: hidden; display: inline-block; } #navLinks { margin-top:-61px; position:relative; text-align: center; width: 600px; } #navLinks ul { margin: 0px; padding: 0px; display: inline-block; margin-top: 6px; } #navLinks ul li { float: left; text-align: center; margin: 10px; list-style: none; cursor: pointer; background-color: rgba(204,204,204,0.8); padding: 10px; border-radius: 50%; border:rgba(255,255,255,0.9) 1px solid; box-shadow: 0 0 4px #fff; } #navLinks ul li:hover { background-color: #FFF; box-shadow: 0 0 10px #fff; border:rgba(255,255,255,0.6) 1px solid; } #navLinks ul li.active { background-color: rgba(156,227,100,0.9); color: #FFFFFF; outline-width: 1px; } #navLinks ul li.active:hover { background-color: rgba(255,255,255,0.7); color: #FFFFFF; box-shadow: 0 0 10px #fff; border:rgba(255,255,255,0.9) 1px solid; } #itemOne { background-color: #000; background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg"); } #itemTwo { background-color: #fff; background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg"); } #itemThree { background-color: #fff; background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg"); } #itemFour { background-color: #fff; background-image: url("http://images5.fanpop.com/image/photos/28100000/Katy-Perry-gifs-katy-perry-28147211-500-300.gif"); } 

 <div id="outsideContainer"> <div id="previous"><<</div> <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="next">>></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>