移动端自适应幻灯片【原创

来源:https://www.sucaihuo.com/js/2740.html 2017-08-15 22:17浏览(1997) 收藏

更多画廊相册代码演示:http://www.sucaihuo.com/search.html?keyword=%E7%94%BB%E5%BB%8A&mtype=2

手机移动端自适应,触摸滑动,自动连播动画效果,slider图像画廊主题插件,js支持拖动、定时滚动的幻灯片插件
移动端自适应幻灯片
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源 下载积分: 50 积分

slider画廊插件配置

var options = {
    $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    $AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
    $PauseOnHover: 1, //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

    $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
    $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
    $SlideDuration: 800, //Specifies default duration (swipe) for slide in milliseconds

    $SlideshowOptions: {//[Optional] Options to specify and enable slideshow or not
        $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
        $Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
        $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
        $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
    },
    $ArrowNavigatorOptions: {//[Optional] Options to specify and enable arrow navigator or not
        $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
        $ChanceToShow: 1                               //[Required] 0 Never, 1 Mouse Over, 2 Always
    },
    $ThumbnailNavigatorOptions: {//[Optional] Options to specify and enable thumbnail navigator or not
        $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
        $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always

        $ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
        $SpacingX: 8, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
        $DisplayPieces: 10, //[Optional] Number of pieces to display, default value is 1
        $ParkingPosition: 360                          //[Optional] The offset position to park thumbnail
    }
};
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2740.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2