javascript - jssor slider 不响应导航箭头

Question

我正在使用 JavaScript 动态构建一个 jssor slider 。该 slider 基于 jssor 'carousel' 演示。显示时一切看起来都是正确的，包括 slider 两端的导航箭头。当我用鼠标向左或向右滑动时，它也会正确响应。但是， slider 不会响应导航箭头上的任何点击。

我在其他帖子中看到提到的一个问题是导航箭头的嵌套不正确。我认为这不是问题所在。任何帮助将不胜感激。

这是构建 slider 的 JavaScript:

var CpxRowSlider = function(callback) {
var callback;
var indexedImgEl = new Array();
var DEFAULT_H = 110;
var DEFAULT_W = 260;
var outerDivEl = document.createElement('div');
var title = true;
var addNavArrows = true;

var sliderDivEl = null;
var sliderId = "slider_SOLO";

/*
 * image set should be an array of key-value pairs where the value is the
 * URL of an image and the key will be used as a tag that identifies the
 * image in any callback functions.
 */
function create(imageSet) {
    /* Slides Container -- */
    var rowDivEl = document.createElement('div');
    $(rowDivEl).attr("u", "slides");
    $(rowDivEl).css({
        "cursor" : "move",
        "position" : "absolute",
        "left" : "0px",
        "top" : "0px",
        "width" : "780px",
        "height" : "110px",
        "overflow" : "hidden"
    });
    for ( var key in imageSet) {
        var imgUrl = imageSet[key];
        var imgDivEl = document.createElement('div');
        var imgEl = document.createElement('img');
        imgEl.src = imgUrl;
        $(imgEl).attr("u", "image");
        imgDivEl.appendChild(imgEl);
        // add to row
        rowDivEl.appendChild(imgDivEl);
        $(imgEl).data("cpxKey", key);
        /*
         * actions associated with the img....
         */
        /*
         * click event gets handed off via callback
         */
        if ((callback != undefined) && (callback != null)) {
            imgEl.onclick = function(evt) {
                var targetImg = evt.target;
                trace("Click on " + $(targetImg).data("cpxKey"));
                callback($(targetImg).data("cpxKey"));
            };
        }
    }
    // add slides to a slider...
    sliderDivEl = document.createElement('div');
    sliderDivEl.id = sliderId

    $(sliderDivEl).css({
        "position" : "relative",
        "left" : "0px",
        "top" : "0px",
        "width" : "780px",
        "height" : "110px"
    });
    // add to DOM
    sliderDivEl.appendChild(rowDivEl);
    if (addNavArrows) {
        sliderDivEl.appendChild(createNavArrow(true));
        sliderDivEl.appendChild(createNavArrow(false));
    }
    outerDivEl.appendChild(sliderDivEl);
}

function createNavArrow(toLeft) {
    var arrowSpan = document.createElement('span');
    $(arrowSpan).attr("u", "image");
    $(arrowSpan).css({
        "top" : "30px",
        "width" : "55px",
        "height" : "55px"
    });
    if (toLeft) {
        $(arrowSpan).css({
            "left" : "5px"
        });

        $(arrowSpan).addClass("jssora03l");
    } else {
        $(arrowSpan).css({
            "right" : "5px"
        });
        $(arrowSpan).addClass("jssora03r");
    }
    return arrowSpan;
}

/*
 * Invoked only AFTER the slider has been added to the DOM
 */
function finalize() {
    // add to sliders being controlled by jssor
    var sliderOptions = getSliderOptions();
    var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);
}

function getSliderOptions() {
    var sliderhOptions = {
        /*
         * $AutoPlay [Optional] Whether to auto play, to enable slideshow,
         * this option must be set to true, default value is false
         */
        $AutoPlay : false,
        /*
         * $PauseOnHover [Optional] Whether to pause when mouse over if a
         * slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause
         * for touch device, 3 pause for desktop and touch device, default
         * value is 1
         */
        $PauseOnHover : 1,
        /*
         * $AutoPlaySteps [Optional] Steps to go for each navigation request
         * (this options applys only when slideshow disabled), the default
         * value is 1
         */
        $AutoPlaySteps : 2,
        /*
         * $ArrowKeyNavigation [Optional] Allows keyboard (arrow key)
         * navigation or not, default value is false
         */
        // $ArrowKeyNavigation : true,
        /*
         * [Optional] Specifies default duration (swipe) for slide in
         * milliseconds, default value is 500
         */
        $SlideDuration : 300,
        /*
         * [Optional] Minimum drag offset to trigger slide , default value
         * is 20
         */
        $MinDragOffsetToSlide : 20,
        /*
         * [Optional] Width of every slide in pixels, default value is width
         * of 'slides' container
         */
        $SlideWidth : DEFAULT_W,
        /*
         * [Optional] Height of every slide in pixels, default value is
         * height of 'slides' container
         */
        // $SlideHeight: 150,
        /*
         * [Optional] Space between each slide in pixels, default value is 0
         */
        $SlideSpacing : 3,
        /*
         * [Optional] Number of pieces to display (the slideshow would be
         * disabled if the value is set to greater than 1), the default
         * value is 1
         */
        $DisplayPieces : 3,
        /*
         * [Optional] The offset position to park slide (this options applys
         * only when slideshow disabled), default value is 0.
         */
        $ParkingPosition : 0,
        /*
         * [Optional] The way (0 parellel, 1 recursive, default value is 1)
         * to search UI components (slides container, loading screen,
         * navigator container, arrow navigator container, thumbnail
         * navigator container etc).
         */
        $UISearchMode : 0,
        // ...................................
        // [Optional] Options to specify and enable navigator or not
        $BulletNavigatorOptions : {
            $Class : $JssorBulletNavigator$, // [Required] Class to
            // create navigator instance
            $ChanceToShow : 1, // [Required] 0 Never, 1 Mouse Over, 2
            // Always
            $AutoCenter : 0, // [Optional] Auto center navigator in
            // parent container, 0 None, 1 Horizontal, 2
            // Vertical, 3 Both, default value is 0
            $Steps : 1, // [Optional] Steps to go for each navigation
            // request, default value is 1
            $Lanes : 1, // [Optional] Specify lanes to arrange items,
            // default value is 1
            $SpacingX : 0, // [Optional] Horizontal space between each item
            // in pixel, default value is 0
            $SpacingY : 0, // [Optional] Vertical space between each item
            // in pixel, default value is 0
            $Orientation : 1
        // [Optional] The orientation of the navigator, 1 horizontal, 2
        // vertical, default value is 1
        }
    }
    return sliderhOptions;
}

function trace(msg) {
    console.log("CpxRowSlider: " + msg);
}

return {
    create : create,
    finalize : finalize,
    getContainer : function() {
        return outerDivEl;
    }
};
};

更新: 好吧，一些挖掘发现了“哪里”，但“为什么”仍然是个谜。生成的 HTML 应如下所示(为了清晰起见，去掉“样式”):

<div id="slider_SOLO" >      
        <div u="slides">
            <div>
                <img u="image" src="../foo1.jpg" />
            </div>
            <div>
                <img u="image" src="../foo2.jpg" />
            </div>
        <div>
        <span u="arrowleft" class="jssora03l" ></span>
        <span u="arrowright" class="jssora03r"></span>
</div>

问题在于，在实际的 HTML 页面中，有两个具有属性 u="slides"的元素。第二个是正确的，但在它之前是另一个空 div。换句话说，当我检查显示的 HTML 时看到的 DOM 更像是:

<div id="slider_SOLO" >     
        <div u="slides"></div>   
        <div u="slides">
            <div>
                <img u="image" src="../foo1.jpg" />
            </div>
            <div>
                <img u="image" src="../foo2.jpg" />
            </div>
        <div>
        <span u="arrowleft" class="jssora03l" ></span>
        <span u="arrowright" class="jssora03r"></span>
</div>

如果我向 jssor carousel 演示 HTML 添加类似的 div，我会得到相同的行为(即导航箭头不再起作用)。

问题是我的 javascript 没有插入错误(即额外的 DIV)。相反，它似乎与调用相关 var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);

我想知道原因是否是我传入的选项中的某些内容。

Answer 1

找到了!根本原因确实是我的选择，但不是我想象的那样。我缺少 $ArrowNavigatorOptions。神秘的 DIV 仍在插入，但现在一切正常。

对我来说，最重要的教训是，jssor 似乎悄然失败，因为它没有生成有关缺少选项的控制台消息，而是什么也没做。