javascript - 如何制作图像轮播控件 'next'和 'previous'

Question

我正在制作图像轮播

看我的 fiddle :https://jsfiddle.net/gd2n6paw/8/

我是 jquery 新手，只是想知道我们如何制作轮播“下一个”和“上一个”控件，感谢您的帮助。

你也可以在这里看到我的代码:

我的html

<div class="slider">
 <div class="container" id="img-slider">
 </div>
</div>
<button onclick="prev()">
 prev
</button>
<button onclick="next()">
 next
</button>

我的CSS

.slider{

min-height:300px;
max-width:400px;
border:1px solid #000;`

}
.container{
background-image:url('http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg');
min-height:300px;
max-width:400px;
}

我的 jQuery

  (function(){

// main image carousel index.html you can customize it ...

var imgSlider = $('#img-slider');
var counter = 0;
var imgSliderContainer = ['http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg','http://www.pycomall.com/images/P1/Natural_Background.jpg','http://www.gochecks.net/data/media/91/Mobile_Nature_Wallpapers_35.jpg'];


function ImageSliderHome(){ 

    imgSlider.fadeOut('5000' ,function(){
        imgSlider.css('background-image', "url('" + imgSliderContainer[counter] + "')");
    }).fadeIn('5000');

    counter++;

    if(counter >= imgSliderContainer.length){
        counter = 0;
    }
}

function prev(){
     ?   
}
 function next(){
     ?
 }

setInterval(ImageSliderHome,3000);

})();

Answer 1

这个怎么样？

https://jsfiddle.net/gd2n6paw/12/

$('#next').click(function(){
    counter++;
    ImageSliderHome();        
});

$('#prev').click(function(){
    if(counter == 0)
        counter = imgSliderContainer.length;
    else
        counter--;
    ImageSliderHome();
});