2

画像を自動的に変更するだけの JavaScript スライダーを作成しました。通常のスライダー ナビゲーションのように、自動ループと共に機能する前と次のボタンを追加するにはどうすればよいですか?

これはスクリプトです：

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

これはマークアップです：

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

これが現在どのように機能するかのフィドルです：http: //jsfiddle.net/barney/vbRLU/ （バーニーへのクレジット）

4

1 に答える 1

0

2 つのボタンを使用してナビゲーションできるように、いくつかの新しい機能をフィドルに適用しました。それがあなたが期待しているものであることを願っています。

埋め込みナビゲーション ボタンで更新

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);
});
于 2013-04-21T14:16:28.103 に答える