滑块导航-下一个上一个

Question

I have created a JavaScript slider, which only works changing images automatically. How can I add a previous and next button that works along with automatic loop, like normal slider navigation?

This is the script:

    function slider(sel, intr , i){
        var _slider = this;
        this.ind = i;
        this.selector = sel;
        this.slide = [];
        this.slide_active = 0;
        this.amount;
        this.intr = intr;
        this.selector.children().each(function(i){
            _slider.slide[i] = $(this);
            $(this).hide();
        })
        this.run();
    }
    slider.prototype.run = function(){
        var _s = this;
        this.slide[this.slide_active].fadeIn();
        setTimeout(function(){
            _s.slide[_s.slide_active].fadeOut()
            _s.slide_active = (_s.slide_active + 1) % _s.slide.length;
            _s.run();
        }, this.intr);
        var count = this.slide.length;
    }   

    var slides = [];

    $('.slider').each(function(i){
        slides[i] = new slider($(this) , 5000, i);
    });

This is the markup:

    <div class="slider">
        <img src="img/modal_slider.jpg" alt="modal_slider" width="782" height="529">
        <img src="img/modal_slider1.jpg" alt="modal_slider" width="782" height="529">
        <a class="slider_btn left" href="javascript:void(0)"></a>
        <a class="slider_btn right" href="javascript:void(0)"></a>
    </div>

CSS:

.slider img{position:absolute};

Here is a fiddle of how it works right now: http://jsfiddle.net/barney/vbRLU/ (credits to Barney )

Answer 1

I adapted your fiddle with some new functions to permit the navigation using two buttons. I hope that it is what you are expecting.

UPDATED with embedded navigation buttons

WORKING EXAMPLE

<div class="small_box top_right slider">
    <img class="fittobox" src="http://www.lorempixel.com/854/592" alt="home10" />
    <img class="fittobox" src="http://www.lorempixel.com/435/392/sports" alt="home3" />
    <img class="fittobox" src="http://www.lorempixel.com/435/392/food" alt="home4" />
</div>

<style>
.slider img{
    display:none;
}
.fittobox {
    width:400px;
}
.next-arrow {
    right:10px;
}
.previous-arrow {
    left:10px;
}
.arrow {
    position:absolute;
    top:50%;
    right:10px;
    height:50px;
    width:50px;
    background-color:black;
    border-radius:10px;
    opacity:0.8;
    color:white;
    line-height:50px;
    text-align:center;
    font-size:10px;
    cursor:pointer;
}
</style>

function slider(sel, intr, i) {
    var _slider = this;
    this.ind = i;
    this.selector = sel;
    this.slide = [];
    this.slide_active = 0;
    this.amount;
    this.timer = null;
    this.selector.children('img').each(function (i) {
        _slider.slide[i] = $(this);
        $(this).hide();
    });

    //Display buttons and register events
    $(this.selector).hover(
    function () {
        $(this).append('<div id="previous-slider-' + i + '" class="previous-arrow arrow">Previous</div>');
        $(this).append('<div id="next-slider-' + i + '" class="next-arrow arrow">Next</div>');
        $('#next-slider-' + i).click(function () {
            _slider.next();
        });
        $('#previous-slider-' + i).click(function () {
            _slider.previous();
        });
    },
    function () {
        //Remove buttons and events
        $('.arrow').remove();
    });

    this.run();
}
slider.prototype.run = function () {
    this.next();
}
slider.prototype.next = function () {
    var _s = this;
    clearInterval(this.timer);
    _s.show(1);
    this.timer = setInterval(function () {
        _s.show(1);
    }, interval);
}
slider.prototype.previous = function () {
    var _s = this;
    clearInterval(this.timer);
    _s.show(-1);
    this.timer = setInterval(function () {
        _s.show(1);
    }, interval);
}
slider.prototype.show = function (shift) {
    var _s = this;
    _s.slide[_s.slide_active].fadeOut(300, function () {
        _s.slide_active = (_s.slide_active + shift < 0) ? _s.slide.length - 1 : (_s.slide_active + shift) % _s.slide.length;
        _s.slide[_s.slide_active].fadeIn(300);
    });
}

var slides = [];
var interval = 3000
$('.slider').each(function (i) {
    slides[i] = new slider($(this), interval, i);
});