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

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(); 
    }); 

});