Question

我使用这个tutorial来创建一个简单的jquery滑块：

HTML（包含div作为“幻灯片”的包装器，可以包含任何内容）：

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

CSS（幻灯片需要绝对定位在包装器中。这有一点额外的pizazz）：

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

JQUERY（在DOM准备就绪后运行）：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

问题是：如何添加下一个＆amp;此滑块的上一个选项？

Answer 1

在这里，我创建了一个工作代码jsfiddle link next-prev button slider。

//添加两个HTML链接 HTML：

   <a id="prev" href="#" >Prev</a>  
   <a id="next" href="#" >Next</a>

JAVASCRIPT：

$("#next").click(function(){
    $('#slideshow > div:first-child')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
});

$("#prev").click(function(){
    $('#slideshow > div:first-child')
    .fadeOut(1000)
     $('#slideshow > div:last-child')
    .prependTo('#slideshow') 
    .fadeOut();
    $('#slideshow > div:first-child').fadeIn();
});

如何添加下一个＆amp;滑块的上一个选项？

1 个答案: