Question

所以我开始学习jQuery，我决定制作一个简单的滑块。一切正常，直到我用用户控件（prev / next img）到达部分。

有人可以告诉我，我在哪里做错了。

<div id="slider">

    <div id="slideshow">
        <img id="1" src="http://i.imgur.com/bWsaWvN.jpg" border="0" alt="First Slide">
        <img id="2" src="http://i.imgur.com/nhxEbVm.jpg" alt="Second Slide">
        <img id="3"src="http://i.imgur.com/OU3hY91.jpg" alt="Third Slide">
    </div>

    <img id="prev" onclick="prev()" src="http://i.imgur.com/v7KjugK.png" alt="">
    <img id="next" onclick="next()" src="http://i.imgur.com/xja1vLW.png" alt="">

</div>

以下是完整的滑块：

http://codepen.io/Chrez/pen/EVWdqe

Answer 1

只需将next()和prev()函数替换为：

$("#prev").click(function () {

    newSlide = sliderInt - 1;
    showSlide(newSlide);

});

$("#next").click(function () {

    newSlide = sliderInt + 1;
    showSlide(newSlide);

});

Demo : Fiddle

Answer 2

您可以使用addEventListener方法而不是onclick属性http://codepen.io/anon/pen/wKJQMo

var btnPrev = document.getElementById('prev');
var btnNext = document.getElementById('next');
btnPrev.addEventListener('click', function(){
    newSlide = sliderInt - 1;
    showSlide(newSlide);
});
btnNext.addEventListener('click', function(){
    newSlide = sliderInt + 1;
    showSlide(newSlide);
});

Answer 3

  $(document).ready(function() {
    $("#slideshow > img#1").fadeIn(300);
    startSlider();


    $("#prev").click(function next() {
      newSlide = sliderInt - 1;
      showSlide(newSlide);
    });

    $("#next").click(function next() {
      newSlide = sliderInt + 1;
      showSlide(newSlide);
    });


  });

jQuery Slider的用户控件无法正常工作

3 个答案: