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()。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我试图将上一个和下一个箭头添加到此内容滑块

1 个答案: