Question

有人可以帮我添加此滑块的下一个和上一个按钮。我在博客中找到了这段代码，...... 在这里，这段代码http://jsfiddle .net / dk5sy93d /

Answer 1

我是Jquery的新手（从昨天开始）。我必须在即将开展的网络开发竞赛中制作一个简单的滑块。这只是我写的东西，因为我似乎遇到的所有东西都附有一个大型库。

＆＃13;

//Manual Slider Control Jquery

$("#slider-next").click(function(){
	if($(".slider-a").is(":visible")){
		$(".slider-a").hide(3000);
	}else{
		$(".slider-b").hide(3000);
	}     				
});

$("#slider-prev").click(function(){
	if(($(".slider-a").not(":visible")) && ($(".slider-b").is(":visible"))){
		$(".slider-a").show(3000);
	}else if(($(".slider-a").not(":visible")) && ($(".slider-b").not(":visible"))){
		$(".slider-b").show(3000);
	}
});

＆＃13;

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

＆＃13;

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

＆＃13;

如果您觉得可以进一步简化并提供相同（如果没有改进）功能，请对此答案发表评论。

Answer 2

这是您的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;   
  }
}

使用next，prev按钮制作简单的jQuery图像Slider

2 个答案: