使下一個簡單的jQuery圖像滑塊，上一步按鈕

Question

有人可以幫助我添加此滑塊的next和prev按鈕。我發現這個代碼在博客中，... 在這裏，這個代碼http://jsfiddle .net/dk5sy93d/

Answer 1

這是您的HTML的JS。

http://jsbin.com/nalewayume/1/edit?js,console,output

function nextSlide() { 
    if(currentSlide < allSlides) {   
     $slide.eq(currentSlide).fadeOut(200);  
     $slide.eq(currentSlide + 1).fadeIn(200);   
     currentSlide+=1; 
    } 
} 

Answer 2

我是新來的Jquery（從昨天起）。我必須在即將到來的Web開發競賽中製作一個簡單的滑塊。這只是我寫的東西，因爲我似乎遇到的每件事都附有一個大型圖書館。如果你覺得它可以進一步簡化這個答案

//Manual Slider Control Jquery 
 

 
$("#slider-next").click(function(){ 
 
\t if($(".slider-a").is(":visible")){ 
 
\t \t $(".slider-a").hide(3000); 
 
\t }else{ 
 
\t \t $(".slider-b").hide(3000); 
 
\t }  \t \t \t \t 
 
}); 
 

 
$("#slider-prev").click(function(){ 
 
\t if(($(".slider-a").not(":visible")) && ($(".slider-b").is(":visible"))){ 
 
\t \t $(".slider-a").show(3000); 
 
\t }else if(($(".slider-a").not(":visible")) && ($(".slider-b").not(":visible"))){ 
 
\t \t $(".slider-b").show(3000); 
 
\t } 
 
});

/* Slider CSS */ 
 
#slider-container{ 
 
    margin:auto; 
 
    text-align:center; 
 
} 
 
#slider-content{ 
 
    margin:auto; 
 
    height:300px; 
 
    width:400px; 
 
    overflow:hidden; 
 
    border:2px solid #000; 
 
    background-color:grey; 
 
} 
 
#slider-controls{ 
 
    margin:auto; 
 
    text-align:center; 
 
    width:400px; 
 
} 
 
#slider-controls button{ 
 
    background-color:#000; 
 
    padding:0 15px; 
 
    font-size:1em; 
 
    border-radius: 0 0 15px 15px; 
 
    color:white; 
 
} 
 
#slider-prev{ 
 
    float:left; 
 
} 
 
#slider-next{ 
 
    float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="slider-container"> 
 
    <div id="slider-content"> 
 
     <img class="slider-img slider-a" src="http://www.light2015.org/.imaging/stk/pop/zoom/dam/CosmicLight/A-Universe-of-Images/Vela_Supernova_Remnant/jcr:content/Vela_Supernova_Remnant.2014-07-17-20-32-16.png" width="400px" height="300px" /> 
 
     <img class="slider-img slider-b" src="http://www.sciuridae.co.uk/photography/images/blown_out_skies/two_images.jpg" width="400px" height="300px" /> 
 
     <img class="slider-img clider-c" src="http://www1.hw.ac.uk/estate/images/landscape-images/cycleways-and-footpaths-big.JPG" width="400px" height="300px" /> 
 
    </div> 
 
    <div id="slider-controls"> 
 
     <button id="slider-prev">Previous</button> 
 
     <button id="slider-next">Next</button> 
 
    </div> 
 
</div>

請發表評論，並提供相同的（如果不是改善）的功能。