Question

我正在尝试使用css和jquery构建基本滑块，其中图像会滑动并单击下一个和上一个按钮。问题是按钮不起作用。

代码如下......

$(function(){
  //configrations
  var width = 960;
  var animationSpeed = 1000;
  var pause = 2000;
  var currentSlide = 1;

  //slide selectors
  var $slides = $('.slides');
  var $slide = $slides.find('.slide');

  //slide with buttons
  function nextSlide(){
      if (currentSlide == $slide.length) {
        currentSlide=1;
          $slides.css({'margin-left':'0'});
      }
      else{
        currentSlide= currentSlide+1;
        $slides.animate({'margin-left':'-='+width},animationSpeed);
      }
    };
  function prevSlide(){
        if(currentSlide == 1){}
        else{
      currentSlide = currentSlide-1;
      $slides.animate({'margin-left':'+='+width},animationSpeed);
  };

$('#prev').on('click',prevSlide);
$('#next').on('click',nextSlide);
});

body{
  margin:0px auto;
  vertical-align: middle;
  padding: 20px 20px;
  color:#999;
  background-image: url('i/body_black.gif');
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'josefin',arial,sans-serif;
}

.container{
  margin:0px auto;
  vertical-align: middle;
  padding: 0px;
  width: 960px;
  overflow: hidden;
  position: relative;
}
.slides{
  width: 6000px;
  height: 500px;
  margin: 0px 0px;
  padding: 0px 0px;
  overflow: hidden;
}
.slide{
  float: left;
}
.slide img{
  width: 960px;
  height: 500px;
}
.button_container{
  margin: 0px auto;
  vertical-align: middle;
  width:100%;
  position: absolute;
  top: 128px;
  left: 0px;
}
.button_container button{
  width: 60px;
  height: 520px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  margin: 0px auto;
  vertical-align: middle;
}
.button_container button:hover{

  background: rgba(0, 0, 0, 0.8);
}
.button_container #prev{
  float: left;
}
.button_container #next{
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="#slide_container">

  <ul class="slides">
    <li class="slide"><img src="http://www.falconflooringct.com/product_images/5840f9c136393.jpg" alt="1"></li>
    <li class="slide"><img src="https://s-media-cache-ak0.pinimg.com/736x/d9/3c/72/d93c729fa88c9e231130f6377a6fded7.jpg" alt="2"></li>
    <li class="slide"><img src="http://www.falconflooringct.com/product_images/5840f9c136393.jpg" alt="3"></li>
    <li class="slide"><img src="https://s-media-cache-ak0.pinimg.com/736x/d9/3c/72/d93c729fa88c9e231130f6377a6fded7.jpg" alt="4"></li>
    <li class="slide"><img src="http://www.falconflooringct.com/product_images/5840f9c136393.jpg" alt="5"></li>
    <li class="slide"><img src="http://www.falconflooringct.com/product_images/5840f9c136393.jpg" alt="1"></li>
  </ul>

</div>
 <div class="button_container">
  <button type="button" name="button" id="prev"><</button>
  <button type="button" name="button" id="next">></button>
</div>
</div>

Answer 1

您必须将下一个和上一个按钮事件绑定更改为此。

$('#prev').on("click", function(){
        prevSlide();
    });
$('#next').on("click", function(){
        nextSlide();
    });

工作代码如下。

$( document ).ready(function() {

  //configrations
  var width = 960;
  var animationSpeed = 1000;
  var pause = 2000;
  var currentSlide = 1;

  //slide selectors
  var $slides = $('.slides');
  var $slide = $slides.find('.slide');

  //slide with buttons
  function nextSlide(){

      if (currentSlide == $slide.length) {

        currentSlide=1;
          $slides.css({'margin-left':'0'});
      }
      else{
        $slides.animate({'margin-left':'-='+width},animationSpeed);
      }
    };

  function prevSlide(){
        alert();
        if(currentSlide == 1){}
        else{
      currentSlide = currentSlide-1;
      $slides.animate({'margin-left':'+='+width},animationSpeed);
      };
  };

$('#prev').on("click", function(){
        prevSlide();
    });
$('#next').on("click", function(){
        nextSlide();
    });

});

为什么这些滑块按钮不起作用？

1 个答案: