javascript - jssor 如何增加图像数量

Question

我无法在 slider 中添加超过 6 个图像。如何增加显示的图像数量？当我将图像增加到 7 个时，第七个图像不起作用。

这是我正在使用的代码:

jQuery(document).ready(function ($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
        {$Duration:1800,$Delay:30,$Cols:10,$Rows:5,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$FlyDirection:5,$Reverse:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:2050,$Easing:{$Left:$JssorEasing$.$EaseInOutSine,$Top:$JssorEasing$.$EaseOutWave,$Clip:$JssorEasing$.$EaseInOutQuad},$ScaleHorizontal:1,$ScaleVertical:0.2,$Outside:true,$Round:{$Top:1.3}},
        {$Duration:600,$Delay:30,$Cols:8,$Rows:4,$SlideOut:true,$FlyDirection:6,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Easing:{$Left:$JssorEasing$.$EaseInQuart,$Top:$JssorEasing$.$EaseInQuart,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2},
        {$Duration:1800,$Delay:30,$Cols:10,$Rows:5,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$FlyDirection:5,$Reverse:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:2050,$Easing:{$Left:$JssorEasing$.$EaseInOutSine,$Top:$JssorEasing$.$EaseOutWave,$Clip:$JssorEasing$.$EaseInOutQuad},$ScaleHorizontal:1,$ScaleVertical:0.2,$Outside:true,$Round:{$Top:1.3}},
        {$Duration:1500,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.1,0.9],$Top:[0.1,0.9]},$SlideOut:true,$FlyDirection:9,$Formation:$JssorSlideshowFormations$.$FormationZigZag,$Assembly:260,$Easing:{$Left:$JssorEasing$.$EaseInJump,$Top:$JssorEasing$.$EaseInJump,$Clip:$JssorEasing$.$EaseOutQuad},$ScaleHorizontal:0.3,$ScaleVertical:0.3,$Outside:true,$Round:{$Left:0.8,$Top:2.5}},
        {$Duration:1200,$Cols:6,$Rows:6,$Clip:15,$During:{$Left:[0.2,0.8],$Top:[0.2,0.8],$Clip:[0,0.2]},$FlyDirection:10,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Column:15,$Row:15},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Top:$JssorEasing$.$EaseInCubic,$Clip:$JssorEasing$.$EaseSwing},$ScaleClip:0.5},
        {$Duration:1200,$SlideOut:true,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$ScaleHorizontal:0.3,$Opacity:2,$Outside:true},
];
var options = {
    $AutoPlay: true,
    $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: _SlideshowTransitions,
            $TransitionsOrder: 1,
            $ShowLink: true
        }
};


var slides = '<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 728px; height: 90px;">';
        slides +=    '<DIV><a href="http://www.tradingstreet.co/ninja.html" target="_new"><IMG src="/banner_ads-hd/ninja_logo.png"></a></DIV>';
    slides +=    '<DIV><a href="http://www.mbtrading.com" target="_new"><IMG src="/banner_ads-hd/mb_trading_logo.png"></a></DIV>';
    slides +=    '<DIV><a href="http://www.tradingstreet.co/kinetick.html" target="_new"><IMG src="/banner_ads-hd/kinetick_logo.png"></a></DIV>';
    slides +=    '<DIV><a href="http://www.tradingstreet.co/ninja_brokerage.html" target="_new"><IMG src="/banner_ads-hd/ninja_brokerage.png"></a></DIV>';
    slides +=    '<DIV><a href="http://www.traderkingdom.com" target="_new"><IMG src="/banner_ads-hd/tk_360x50.jpg"></a></DIV>';
    slides +=    '<DIV><a href="http://wallstreet2easystreet.blogspot.com" target="_new"><IMG src="/banner_ads-hd/ws2es_banner.png"></a></DIV></div>';
    slides +=    '<DIV><a href="http://feeds.feedburner.com/TheGoldReport-StreetwiseExclusiveFullArticles" target="_new"><IMG src="/banner_ads-hd/tgr_masthead_728x90.jpg"></a></DIV></div>';
//console.log("setting slides 2");
$("#slider2").html(slides);
$("#slider2").css({"position": "relative", "top": "0px", "left": "0px", "width": "728px", "height": "90px"});
var jssor_slider1 = new $JssorSlider$('slider2', options);

});

Answer 1

有一个额外的“

”，它使您的最后一张图像位于“幻灯片”容器之外。

请更换

slides +=    '<DIV><a href="http://wallstreet2easystreet.blogspot.com" target="_new"><IMG src="/banner_ads-hd/ws2es_banner.png"></a></DIV></div>';

与

slides +=    '<DIV><a href="http://wallstreet2easystreet.blogspot.com" target="_new"><IMG src="/banner_ads-hd/ws2es_banner.png"></a></DIV>';

此外，如果您希望 jssor slider 将图像填充到“slides”容器中，请全部替换

<a href=

与

<a u="iamge" href=

关于javascript - jssor 如何增加图像数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26520055/