Javascript 如何将交互式项目符号添加到我的jquery滑块

我正在尝试制作一个包含五张图片、下一个和上一个按钮的滑块（它们将在稍后进行样式设置）。滑块自动工作，当悬停滑块时，循环按预期停止。 我尝试添加交互式项目符号，以响应给定的图片。应始终突出显示一个点，该点对应于当前显示的图像。 但是我不能让它工作。 有人能帮忙吗？JSFIDLE

HTML

<div id="quickslider">
<div class="quickslider">
    <img class="slide" id="1" src="Slider_images/gc_slide_1.png" alt="placeholder image">
    <img class="slide" id="2" src="Slider_images/gc_slide_2.png" alt="placeholder image">
    <img class="slide" id="3" src="Slider_images/gc_slide_3.png" alt="placeholder image">
    <img class="slide" id="4" src="Slider_images/gc_slide_4.png" alt="placeholder image">
    <img class="slide" id="5" src="Slider_images/gc_slide_5.png" alt="placeholder image">
</div><!--quickslider-->

<nav class="slider-nav">
    <a href="#1" class="active">1</a>
    <a href="#2" >2</a>
    <a href="#3" >3</a>
    <a href="#4" >4</a>
    <a href="#5" >5</a>
</nav>

<div class="quickslider-nav">
    <a href="#" class="left"onclick="prev(); return false;">Prev</a>
    <a href="#" class="right" onclick="next(); return false;">Next</a>
</div>
</div>

JavaSript

sliderint= 1;
sliderNext = 2;

$(document).ready(function(){
    $('.quickslider>img#1').fadeIn(300);
    startSlider();
})

function startSlider (){
    count=$(".quickslider>img").size(); 

    loop = setInterval(function(){
        if(sliderNext>count){
            sliderNext=1;
            sliderint=1;
        }

        $('.quickslider>img').fadeOut(300);
        $('.quickslider>img#'+sliderNext).fadeIn(300);

        sliderint=sliderNext;
        sliderNext=sliderNext + 1;
    },5000)
}

function prev(){
    newSlide = sliderint-1;
    showSlide(newSlide);
}

function next(){
    newSlide = sliderint+1;
    showSlide(newSlide);   
}

function stopLoop(){
    window.clearInterval(loop);
}

function showSlide(id){
    stopLoop();
    if(id>count){
        id=1;
    }
    else if(id<1){
        id=count;  
    }

    $('.quickslider>img').fadeOut(300);
    $('.quickslider>img#'+id).fadeIn(300);

    sliderint=id;
    sliderNext=id + 1;
    startSlider();   
}

$(document).ready(function(){
    $(".quickslider > img").hover(
        function ()
        {
           stopLoop ();
        },
        function () {
            startSlider ();
        }
    );
});

sliderint=1；
sliderNext=2；
$（文档）.ready（函数（）{
$（'.quickslider>img#1'）.fadeIn（300）；
startSlider（）；
})
函数startSlider（）{
计数=$（“.quickslider>img”）.size（）；
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；
滑块=1；
}
$（'.quickslider>img'）。淡出（300）；
$（'.quickslider>img#'+slidenxt）.fadeIn（300）；
sliderint=sliderNext；
sliderNext=sliderNext+1；
},5000)
}
函数prev（）{
newSlide=slident-1；
放映幻灯片（新闻幻灯片）；
}
函数next（）{
newSlide=slident+1；
放映幻灯片（新闻幻灯片）；
}
函数stopLoop（）{
清除间隔（循环）；
}
功能演示幻灯片（id）{
stopLoop（）；
如果（id>计数）{
id=1；
}
否则，如果（idDemo:

既然你只问互动子弹，我只关注它们，没有触及其他地方

我在$（document）.ready（）中添加了一个onclick事件处理程序来检测用户对项目符号的单击，并从中调用showsiled（）

$('body').on('click', ".slider-nav a", function(e){
    e.preventDefault();
    var href = $(e.target).attr("href");

    showSlide(href.substring(1, href.length));
  });

showsiled（）
因此成为了您想要更改幻灯片时可以调用的函数。因此，我稍微更改了
startSlider（）
中的代码，以利用
showsiled（）
而不是其当前实现

希望这能有所帮助。
我已经根据您的HTML输出创建了新的jquery代码，因为您的旧代码看起来有点凌乱。您可以修改下一个函数、上一个函数和项目符号函数来设置显示动画，或者更好地使用纯CSS（如transform、translate或transition）来设置显示动画，整个概念是在这两个函数上都添加
active
类基于点击事件的项目符号和图像。我还修改了一些CSS代码

你可以查一下

忘记了CSS的重要部分

此CSS代码是显示图像所必需的

.quickslider img.active {
    display: block;
}

换句话说，你正在尝试创建。是的，没错！幻灯片本身可以工作，每5秒钟改变一次图片。但是如果你发现我的评论没有建设性，项目符号就不会起作用，我只是想告诉你使用外部库（比如我链接中的slick）为了解决你的问题。因为旋转木马在前端是一个很难解决的问题，通常需要几周的时间来覆盖所有可能的bug。那么为什么要尝试重新发明轮子呢？你的评论绝不是非建设性的。我只是不被允许使用插件或外部库。我必须从头开始。这就是为什么我在寻找子弹方面的帮助。我明白了。T这个问题是因为你在每个img上绑定了hover事件。所以当你在img淡出的过程中悬停在它上面时，它最终会完全淡出并触发hover out事件再次启动循环。将事件绑定到#quickslider本身应该可以解决这个问题。看，哈哈，哇，我学到了一些新的东西。显然使用项目符号更改幻灯片时，为showSlide（）提供的id是一个字符串（因为该值是从锚点的href属性中剪切出来的）因此，后来
sliderNext=id+1
变成了一个字符串串联，在这种情况下变成了31而不是4。修复：哈哈，这段代码被严重诅咒了！当你不碰任何东西时，一切都会工作-一旦按下一个项目符号，悬停就不起作用，但它会按正确的顺序变化。当你按下其中一个项目符号时第二（或第三）时间在几张幻灯片后再次开始跳跃，有时速度会加快。我真的很感谢您的大力帮助！呃，这就是为什么我说旋转木马不容易>\uu<无论如何，开始循环被调用了两次，创建并行间隔。在设置新间隔之前清除会修复它。我现在使用setTimeout而不是setInterval，因为它每次都被调用lide change。啊，太棒了！我现在明白了。非常感谢你的帮助！嗯……我认为他最初的想法是使用集中式幻灯片（id）更改幻灯片的函数是一个很好的方法。OOP和诸如此类。可能是，上面的代码只是一个非常基本的功能，对于非常简单的幻灯片，我只做了不超过15分钟。当然有无数更好的方法可以做到这一点。此外，HTML4不能有一个以数字开头的ID，而且在针对CSS时它也不起作用，尽管它被接受为n HTML5非常感谢您的帮助Silver。不幸的是，我无法使它与存储在我的计算机上的正确图片一起工作。滑块显示为空白。是否存在控制台日志错误？检查元素并检查第一个图像和第一个项目符号是否具有活动类，同时，将您的CSS与我创建的页面上的CSS进行比较
(function($){

  $('.nav-thumbs li:first-of-type, .quickslider img:first-of-type').addClass('active');

  //Previous function
  $('.quickslider-nav').on('click', '.left', function(e){
    e.preventDefault();
    showPrevious();
  });
  function showPrevious() {
    if ( !$('.nav-thumbs li:first-of-type').hasClass('active') ) {
      $('.active').removeClass('active').prev().addClass('active');
    } else {
      $('.nav-thumbs li, .quickslider img').removeClass('active');
      $('.nav-thumbs li:last-of-type, .quickslider img:last-of-type').addClass('active');
    }
  }

  //Next function
  $('.quickslider-nav').on('click', '.right', function(e){
    e.preventDefault();
    showNext();
  });
  function showNext() {
    if ( !$('.nav-thumbs li:last-of-type').hasClass('active') ) {
      $('.active').removeClass('active').next().addClass('active');
    } else {
      $('.nav-thumbs li, .quickslider img').removeClass('active');
      $('.nav-thumbs li:first-of-type, .quickslider img:first-of-type').addClass('active');
    }
  }

  // Bullets 
  $('.nav-thumbs').on('click', 'li', function(){
    $('.nav-thumbs li, .quickslider img').removeClass('active');
    $(this).addClass('active');
        $('.quickslider img').removeClass('active').eq($(this).index()).addClass('active');
    return false;
  });

  // Autoplay every 3 seconds
  setInterval(function(){
        if( !$('#quickslider').is(':hover') ) {
            showNext();
        }
  }, 3000);
})(jQuery);

.quickslider img.active {
    display: block;
}