Jquery滑塊下一個/上一個按鈕

Question

我已經構建了一個滑塊，可以單擊圖像並向前移動。我正在嘗試添加Next和Previous按鈕，但遇到了麻煩。任何幫助表示讚賞！

下面是我在哪裏演示... 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); 
});​ 

Answer 1

嘿檢查THI s一出：http://jsfiddle.net/Dwxfc/

這應該適合您的需要，:)也注意上面的示例只有下一個功能，因此它重複自己。

休息希望它適合您的需要，請lemme知道這是否。 B-)

代碼

$(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; 
} 
​