jssor滑块没有响应导航箭头

时间:2014-08-14 16:09:29

标签: javascript jssor

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

我在其他帖子中提到过的一个问题是导航箭头的嵌套不当。我不认为这是问题所在。任何帮助都将非常感激。

以下是构建滑块的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 =&#34; slide&#34;。第二个是正确的,但在它是另一个空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 demo HTML中添加一个类似的div,我会得到相同的行为(即导航箭头不再有效)。

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

我想知道原因是否是我传递的选项中的原因。

1 个答案:

答案 0 :(得分:1)

发现它!根本原因确实是我的选择,但不是我想的那样。我错过了$ ArrowNavigatorOptions。神秘的DIV仍在插入,但现在一切正常。

对我而言,外卖课程是,jssor似乎在某种意义上悄然失败,而不是生成关于缺失选项的控制台消息,它根本就什么都不做。