jQuery滑块'的用户控件不工作

jQuery Slider's user control not working

本文关键字：用户 控件 工作 滑块 jQuery      更新时间：2023-09-26

所以我已经开始学习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

将next()和prev()函数替换为:

$("#prev").click(function () {
    newSlide = sliderInt - 1;
    showSlide(newSlide);
});
$("#next").click(function () {
    newSlide = sliderInt + 1;
    showSlide(newSlide);
});

Demo: Fiddle

可以使用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);
});


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

相关文章：