javascript - 我正在尝试将上一个和下一个箭头添加到此内容 slider

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 这样的插件。如果通过从头开始构建新的 slider 更容易做到这一点，那么任何解释如何实现这一点的资源链接也将不胜感激。

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>