Jquery slider next/previous-Tasten

Habe ich gebaut, ein regler, wo ich kann, klicken Sie auf die Bilder und es bewegt sich vorwärts. Ich bin versucht hinzuzufügen, die Schaltflächen Weiter und zurück aber ich habe Probleme. Jede Hilfe ist willkommen!

Hier ist eine demo, wo ich bin...
JSFiddle

<div id="container">

    <div class="next">Next</div>
    <div class="prev">Previous</div>

    <div id="image1" class="box">Orange</div>
    <div id="image2" class="box">Blue</div>
    <div id="image3" class="box">Green</div>
    <div id="image4" class="box">Red</div>
    <div id="image5" class="box">Yellow</div>

</div>

CSS

body {
    padding: 0px;    
}

.next {
    width:100px;
    height:50px;
}

.prev {
    width:100px;
    height:50px;
}

#container {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#image1 {
    background-color: orange;
    left: 50%;
}

#image2 {
    background-color: blue;
}

#image3 {
    background-color: green;
}

#image4 {
    background-color: red;
}

#image5 {
    background-color: yellow;
}

JQUERY

$('.box').click(function() {

$(this).animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
});

$(this).next().animate({
    left: '50%'
}, 500);
});​

InformationsquelleAutor Woolf Faulkner | 2012-08-06
  1. 2

    Hey Überprüfen Sie dieses heraus: http://jsfiddle.net/Dwxfc/

    Dies sollte Ihre Bedürfnisse,:) beachten Sie auch das obige Beispiel, nur haben die neben der Funktionalität daher wiederholt er sich.

    Rest hoffen, dass es Ihren Bedürfnissen passt, bitte laß mich wissen, wenn dies nicht. B-)

    Code

    $(function(){

    //Lazyload function
    $.fn.lazyload = function(){
        var image = $(this);
        if (image.attr('real-src')){
            image.attr('src', image.attr('real-src'));
            image.removeAttr('real-src');
        }
        return this;
    };

    //Slider constructor
    $.fn.imageSlider = function(){
        this.each(function(){
            var $slider = $(this);

            var $active = $slider.find('img:first');
            $active.addClass('active');
            $active.lazyload();

            //Slider control buttons
            var $nextButton = $slider.find('.next');
            var $prevButton = $slider.find('.previous');

            $prevButton.toggle();

            //Handle if next button should appear
            $nextButton.click(function(){
                var $next = $active.next();
                $active.removeClass('active');
                $next.addClass('active');
                $active = $next;
                $active.lazyload();

                if ($active.next().length == 0){
                    $nextButton.toggle();
                }
                $prevButton.show();

            })

            //Handle if next button should appear
            $prevButton.click(function(){
                var $prev = $active.prev();
                $active.removeClass('active');
                $prev.addClass('active');
                $active = $prev;
                $active.lazyload();

                if ($active.prev().length == 0){
                    $prevButton.toggle();
                }
                $nextButton.show();
            })
        })

            return this;
        };

})

$(document).ready(function(){
    var $slider = $('#slider');
    if ($slider.find('.active').length == 0){
        $slider.imageSlider();
    }
})
​

    HTML

    <div id="slider" class="slider_container">
    <center>
        <a href="#" class="previous"> Previous &lt; </a>
        <a href="#" class="next"> Next &gt; </a>
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://ultradownloads.com.br/conteudo/Joyce/para_nossa_alegria_cartoon.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://www.oesquema.com.br/trabalhosujo/wp-content/uploads/2012/03/para-nossa-alegria-pan.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://youpix.com.br/wp-content/uploads/2012/03/para-nossa-alegria-uhu.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://2.bp.blogspot.com/-dcgzVluf0is/T2z1K0GbVgI/AAAAAAAAMIU/yVXoH4IHV5M/s1600/para-nossa-alegria.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://desordempublica.com.br/wp-content/uploads/2012/03/sexta-para-nossa-alegria.jpg">
    </center>
</div>

​

    CSS

    .slider_container {
    position: relative;
}

.slider_container img {
    display:none;
}

.slider_container img.active {
    display:block;
}
​
    • Danke für die Antwort. Dennoch versuche ich zu behalten, der slide-Effekt, wo das Bild kommt aus dem Bildschirm. Ich habe in der Lage gewesen, um es so weit, bin jedoch Schwierigkeiten haben, ein Bild auf Folie zu einer Zeit,... schauen Sie hier: jsfiddle.net/coltanious/dRGKH
    • cooleos Mann erhalten zurück zu Ihnen auf das Effekt-Problem, in der Zwischenzeit halten Sie spielen, um es gerade sein sollte fwd, :)
    InformationsquelleAutor Tats_innit
Schreibe einen Kommentar