Question

您好我正在尝试使用javascript创建一个滑块，我将我的图像放在一个数组中。到目前为止，我已经使用“下一步”按钮，但我正在努力使用“上一个”按钮，我不知道如何开始。我是javascript的新手，所以如果我的代码效率很低，请告诉我。

这就是我用于“下一步”按钮

的内容

function slideRight() {
    index++
    if(index >= slideList.length){
        index = 0;
        slideList[2].style.display = 'none'; 
        circle[index].style.backgroundColor = 'red';
        circle[2].style.backgroundColor = 'black';
    }

    slideList[index].style.display = 'block'; 
    slideList[index-1].style.display = 'none'; 

    circle[index].style.backgroundColor = 'red';
    circle[index-1].style.backgroundColor = 'black';
}

我尝试使用减量，但这不起作用。

这是完整代码fiddle

的小提琴

Answer 1

var slide = document.getElementsByClassName("slide"),//getting slide class as node list
    circle = document.getElementsByClassName("circle"),
    slideList = [slide[0],slide[1],slide[2]], //storing each image using nodelist index 
    buttonL = document.getElementById('bt1'),
    buttonR = document.getElementById('bt2'),
    index = 0;

slideList[0].style.display = 'block'; //first slide 

//function which display div to indicate what slide is showing
(function displayCircle() { 
    var circleContainer = document.getElementById('circleContainer'),
        circleHtml ='',
        i;
    for (i = 0; i < slideList.length; i++) {
        circleHtml += '<div class="circle"></div>';
    }
    circleContainer.innerHTML = circleHtml;
}());

circle[0].style.backgroundColor = 'red'; //first light

function slideRight() {
    var prev = index++;
    if(index >= slideList.length){
        index = 0;
    }
    
    slideList[index].style.display = 'block'; 
    slideList[prev].style.display = 'none'; 
    
    circle[index].style.backgroundColor = 'red';
    circle[prev].style.backgroundColor = 'black';
}

function slideLeft() {
    var prev = index--;
    if(index < 0){
        index = slideList.length - 1;
    }
    
    slideList[index].style.display = 'block'; 
    slideList[prev].style.display = 'none'; 
    
    circle[index].style.backgroundColor = 'red';
    circle[prev].style.backgroundColor = 'black';
}


buttonR.addEventListener('click', slideRight, false);
buttonL.addEventListener('click', slideLeft, false);

html, body {
    height: 100%;
    width: 100%;

}

main {
    height: inherit;
}

* {
    margin: 0;
    padding: 0;
}

img {
    width: 300px;
}

#sliderContainer {
    display: inline-block;
    margin: auto;
    border: 2px solid red;
}

.slide {
    text-align: center;
    display: none;
    
}

.btcontainer {
    display: inline-block;
    width: 22%;
    height: 100%;
}

.button {
    position: relative;
    top: 50%;
    margin: auto;
    width: 30%;
    height: 5%;
    background-color: black;
}

#circleContainer {
    text-align: center;
    height: 5%;
}

.circle {
    display: inline-block;
    margin-top: 0.5%;
    margin-left: 1%;
    width: 1.5%;
    height: 50%;
    background-color: black;
}

<body>
    <main>
        <div class="btcontainer" id="btC2">
            <div class="button" id="bt1"></div>
        </div>
        <div id="sliderContainer">
            <ul id="slideGroup">
                <li class="slide"><img src="http://www.electricprism.com/aeron/slideshow/examples/1.jpg" /></li>
                <li class="slide"><img src="http://www.phpf1.com/images/maxSlideShow/slideshow.jpg" /></li>
                <li class="slide"><img src="http://www.welie.com/patterns/images/slideshow-pro.png" /></li>
            </ul>
        </div>

        <div class="btcontainer" id="btC2">
            <div class="button" id="bt2"></div>
        </div>
        
        <div id="circleContainer"></div>
    </main>
    <script type="text/javascript" src="script.js"></script>
</body>

Answer 2

你可以对它进行优化，只对这两个作业使用一个函数，使用它（参见action）：

var slide = document.getElementsByClassName("slide"),//getting slide class as node list
    circle = document.getElementsByClassName("circle"),
    slideList = [slide[0],slide[1],slide[2]], //storing each image using nodelist index 
    buttonL = document.getElementById('bt1'),
    buttonR = document.getElementById('bt2'),
    index = 0;

slideList[0].style.display = 'block'; //first slide 

//function which display div to indicate what slide is showing
(function displayCircle() { 
    var circleContainer = document.getElementById('circleContainer'),
        circleHtml ='',
        i;
    for (i = 0; i < slideList.length; i++) {
        circleHtml += '<div class="circle"></div>';
    }
    circleContainer.innerHTML = circleHtml;
}());

circle[0].style.backgroundColor = 'red'; //first light

function slideIt(direction) {
    previous = index;

    if (direction == 'right') {
        index++;
        if (index >= slideList.length) {
            index = 0;
        }
    } else {
        index--;
        if (index < 0) {
            index = slideList.length-1;
        }
    }

    slideList[index].style.display = 'block'; 
    slideList[previous].style.display = 'none'; 

    circle[index].style.backgroundColor = 'red';
    circle[previous].style.backgroundColor = 'black';
}

buttonR.addEventListener('click', function(){ slideIt('right'); }, false);
buttonL.addEventListener('click', function(){ slideIt('left'); }, false);

Answer 3

我修改了你的代码。您还可以模块化代码添加一个带有参数的侦听器函数+或 - 向右/向左滚动

var slide = document.getElementsByClassName("slide"),//getting slide class as node list
circle = document.getElementsByClassName("circle"),
index = 0;

//function which display div to indicate what slide is showing
(function displayCircle() { 
    var circleContainer = document.getElementById('circleContainer'),
        circleHtml ='',
        i;
        for (i = 0; i < slide.length; i++) {
            circleHtml += '<div class="circle"></div>';
        }
    circleContainer.innerHTML = circleHtml;
    
}());

slide[0].style.display = 'block'; //first slide 
circle[0].style.backgroundColor = 'red'; //first light
function slideImg(dir) {
    var lastIndex = index;
    index = dir==='+' ? (++index > slide.length-1 ? 0 : index) : (--index < 0 ? slide.length-1 : index);
    
    
    slide[index].style.display = 'block'; 
    slide[lastIndex].style.display = 'none'; 

    circle[index].style.backgroundColor = 'red';
    circle[lastIndex].style.backgroundColor = 'black';
}

document.getElementById('bt2').addEventListener('click', (function(){slideImg('+');}), false);
document.getElementById('bt1').addEventListener('click', (function(){slideImg('-');}), false);

html, body {
    height: 100%;
    width: 100%;

}

main {
    height: inherit;
}

* {
    margin: 0;
    padding: 0;
}

img {
    width: 300px;
}

#sliderContainer {
    display: inline-block;
    margin: auto;
    border: 2px solid red;
}

.slide {
    text-align: center;
    display: none;
    
}

.btcontainer {
    display: inline-block;
    width: 22%;
    height: 100%;
}

.button {
    position: relative;
    top: 50%;
    margin: auto;
    width: 30%;
    height: 5%;
    background-color: black;
}

#circleContainer {
    text-align: center;
    height: 5%;
}

.circle {
    display: inline-block;
    margin-top: 0.5%;
    margin-left: 1%;
    width: 1.5%;
    height: 50%;
    background-color: black;
}

<main>
        <div class="btcontainer" id="btC2">
            <div class="button" id="bt1"></div>
        </div>
        <div id="sliderContainer">
            <ul id="slideGroup">
                <li class="slide"><img src="http://www.electricprism.com/aeron/slideshow/examples/1.jpg" /></li>
                <li class="slide"><img src="http://www.phpf1.com/images/maxSlideShow/slideshow.jpg" /></li>
                <li class="slide"><img src="http://www.welie.com/patterns/images/slideshow-pro.png" /></li>
            </ul>
        </div>

        <div class="btcontainer" id="btC2">
            <div class="button" id="bt2"></div>
        </div>
        
        <div id="circleContainer"></div>
    </main>

Answer 4

function slideLeft() {
    index--;
    if(index < 0){
        index = slideList.length;
    }
   // whatever else you need to do to slide it ;)
}

我认为index < 0部分应该会让你走得更远。 index - 减少你的索引，然后如果它低于0（你的第一个），索引将被设置为最后一个。

单击后返回数组中的项目

4 个答案: