Question

我试图在http://residentialbylandsecurities.com/上复制效果在滑块上，如果将鼠标悬停在箭头上，则会显示即将发布的幻灯片的缩略图。我已经安装了相同的滑块（FlexSlider），但这是一个自定义。我的示例网站是here（未完成）。

他们的脚本是在this file中运行的，但是这太长而且庞大而且做得比我需要的要多得多，我只想编写自己的函数。

我的伪代码： 1.主要设置next / prev控件，为每个控件添加div.thumbnail 2.在当前活动的幻灯片之前和之后找到幻灯片，并将它们保存在变量中（prevSlide，nextSlide） 3.从这些幻灯片img元素中获取data-thumb属性，并将每个元素保存在变量中（prevThumbData和nextThumbData） 4.找到.next div.thumbnail和.prev div.thumbnail 5.将prevThumbData和nextThumbData作为CSS背景图像应用于它们各自的元素。 6. CSS：将鼠标悬停在箭头元素上时，滑入div.thumbnail

我根本不需要使用其他网站的功能，除非它更简单，我只需要完成上述操作。我已经设置了我的IMG元素以获得data-thumb属性，但还没有想出如何修改滑块以包含div.thumbnail。

编辑：我想我已经找到了程序的第二步和第三步：

2。在当前活动的幻灯片之前和之后找到幻灯片，并将它们保存在变量中（prevSlide，nextSlide）

function flexThumbs() { 
var slider = $('.flexSlider div ul')
var slides = new Array(slider.children());
var images = slide.find('img'); 
var currentSlide = $("li.flex-active-slide");
// find next and previous slides
var totalSlides = slider.slides.length;
    var nextSlide = slider.currentSlide + 1;
    if (nextSlide >= totalSlides)
        nextSlide = 0;
    var prevSlide = slider.currentSlide - 1;
    if (prevSlide < 0)
        prevSlide = totalSlides - 1;

第3。从这些幻灯片img元素中获取data-thumb属性，并将每个元素保存在变量中（prevThumbData和nextThumbData）

var prevThumbData = $(prevSlide > "img").attr("data-thumb");
var nextThumbData = $(nextSlide > "img").attr("data-thumb");
}

Answer 1

看起来答案在他们的scripts.js文件中。

首先，在他们呼叫.flexslider()的部分中，他们正在通过after:回调。这只是flexslider中的默认回调选项之一。

回调后

：

            after: function (slider) {
                if (!isTouch) {
                    mainSlider.setThumbs(slider);
                    flexsliderCopy.fadeIn(300); // Fade text back in
                } else {
                    //mainSlider.removeBulk(slider.currentSlide);
                }
            }

所以我们看到他们正在调用.setThumbs()方法。快速ctrl + f显示：

            mainSlider.setThumbs = function (slider) {
                var totalSlides = slider.slides.length;
                var nextSlide = slider.currentSlide + 1;
                if (nextSlide >= totalSlides)
                    nextSlide = 0;
                var prevSlide = slider.currentSlide - 1;
                if (prevSlide < 0)
                    prevSlide = totalSlides - 1;

                prevThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(prevSlide).attr('data-thumb') + ')'
                });
                nextThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(nextSlide).attr('data-thumb') + ')'
                });

                prevThumb.animate({
                    opacity: 1
                });
                nextThumb.animate({
                    opacity: 1
                });
            };

Flexslider：如何在点击之前显示幻灯片的缩略图？

1 个答案: