jssor如何增加图像数量
jssor How to Increase Number of Images
我不能在滑块中添加超过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);
});
有一个额外的'<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://wallstreet2easystreet.blogspot.com" target="_new"><IMG src="/banner_ads-hd/ws2es_banner.png"></a></DIV>';
此外,如果您希望jssor滑块将您的图像填充到"幻灯片"容器中,请更换所有
<a href=
带有
<a u="iamge" href=
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 如何使用 html 根据表内容增加图像大小
- 随着模块数量的增加,Javascript图像正在重复
- 如何在滚动时增加图像的不透明度
- Canvas toDataUrl增加了图像的文件大小
- jssor如何增加图像数量
- 保存画布中的图像而不增加其大小
- 设置间隔以增量增加/减少图像宽度
- 删除特定图像时增加该值
- 增加无序列表中图像的可点击区域
- 在js中增加图像大小
- 如何在html中增加画布图像的大小
- ThreeJS loadTexture将图像收集到内存中,并且内存增加得很快
- 增加jCarousel可见图像不工作
- 更改图像src会增加资源
- 灯箱问题,我多次放置相同的链接,图像数量增加
- HTML 幻灯片图像大小在更改其尺寸时不会增加
- 如何在单击图像时增加iframe宽度
- 堆叠的图像集,每个图像的偏移量增加
- 如何增加图像的大小,使其可见