javascript - 如何在 JQuery 幻灯片代码中添加上一个和下一个按钮

Question

我有下面幻灯片的 jQuery 代码。它在我现在正在进行的项目中完美运行。虽然，如果可能的话，我想在同一代码中实现上一个和下一个按钮。任何帮助将非常感激。

<script type="text/javascript">
function() {
  $(".slider #1").show("fade",500);
  $(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
    var sc = $(".slider img").size();
  var count = 2;
    setInterval(function(){
   $(".slider #"+count).show("slide",{direction:"right"},500);
   $(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
      if(count == sc){
     count = 1;
    }
    else
    {
     count=count+1;
    }
   },6500);
  }
</script>

<div class="slider">
    <img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
    <img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
    <img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>

<style>
.slider {
    width: 800px;
    height: 349px;
    overflow:hidden;
    margin: 30px auto;
    background-image: url(images/slider/load.GIF);
    background-repeat: no-repeat;
    background-position: center;
}
.slider img {
    width: 800px;
    height: 349px;
    display: none;
}
</stile>

Answer 1

您可以执行以下操作:

var sc;
var count = 1;

$(document).ready(function() {
  sc = $(".slider img").size();
  $(".slider #1").show("fade",500);
  setInterval(function(){
    switchPanel(1);
  },5500);
  $("#prev").click(function(){switchPanel(-1)});
  $("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
  var hide, show;
  if (direction == 1)
  { 
    show = "right";
    hide = "left";
  }
  else if (direction == -1)
  {
    show = "left";
    hide = "right";
  }
  $(".slider #"+count).hide("slide",{direction:hide},500);
  count = count + direction;
  if(count == sc + 1) count = 1;
  else if(count == 0) count = sc;
  $(".slider #"+count).show("slide",{direction:show},500);
}

剩下的就是添加上一个 (#prev) 和下一个 (#next) 按钮。