带有计数器、缩略图、进度条和淡入淡出效果的简单 jQuery 幻灯片

Question

我正在尝试创建我的第一个网站，并且希望获得一些帮助来创建带有图像的滑块。

我试图用谷歌搜索我的问题的解决方案，在尝试修复我在网上找到的插件后，我没有设法让它工作。我没有使用 javascript 的经验。

我正在尝试制作一个简单的滑块。导航计数器，如 2 / 32。底部的小进度条。页面底部的小缩略图。

图像大小大约为 250kb，它们将显示大约 20 到 30 张图像......所以我不确定我们是否也应该对脚本进行某种预加载。？

有什么帮助吗？我尝试了我在网上找到的这段代码，但没有成功：

https://jsfiddle.net/ufb6dwLx/

jQuery(function($){
    //previous slide
    $('.slideshow .prev').click(function() {
         prevSlide($(this).closest('.slideshow').find('.slides'));
    });
    //next slide
    $('.slideshow .next, .slideshow img,').click(function() {
         nextSlide($(this).closest('.slideshow').find('.slides'));
    });
    //initialize show
    iniShow();
    function iniShow() {
    // show first slide with caption
    $('.slideshow').each(function() {
        showSlide($(this).find('.slides'));
    });
    }
    // move previous slide 
    function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
        showSlide($slides);
    }
    // move next slide 
    function nextSlide($slides) {
         $slides.find('img:first').appendTo($slides);
         showSlide($slides);
    }
    // show slide with caption
    function showSlide($slides) {
         var $nextSlide = $slides.find('img:first');
         //hide (reset) all slides
         $slides.find('img').hide();
         //fade in next slide
         $nextSlide.fadeIn(500);
         //show caption
         $('#caption').text($nextSlide[0].alt);
         //count image
         var currentNum = $nextSlide.attr('index');
         var count = $nextSlide.closest('.slideshow').find('img').length;
         $('#count').html(currentNum + ' of ' + count);
    }
});

提前感谢您的宝贵时间！

Answer 1

我在这里修好了你的小提琴：https://jsfiddle.net/ufb6dwLx/4/

//previous slide
$('.prev').click(function() {
    prevSlide($('.slideshow').closest('.slideshow').find('.slides'));
});
//next slide
$('.next, .slideshow img').click(function() {
    nextSlide($('.slideshow').closest('.slideshow').find('.slides'));
});

我建议为这么多幻灯片实现延迟加载，使用 jQuery 很容易做到：https://plugins.jquery.com/lazyload/

我会把缩略图留给你。