Question

我正在尝试创建我的第一个网站，我想帮助创建带图像的滑块。

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

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

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

有任何帮助吗？我试过这个代码，我在网上找到但没有成功：

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

我会建议为许多幻灯片实现Lazy Loading，使用jQuery很容易：https://plugins.jquery.com/lazyload/

我会把缩略图留给你。

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

1 个答案: