js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS广告代码 > JS幻灯片

html5实现手机触摸滑动图片幻灯片轮播切换特效

发布时间:2015-09-09 08:16:31    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

html5实现手机触摸滑动图片幻灯片轮播切换特效
jQuery(document).ready(function ($) {

	var _SlideshowTransitions = [
	//Fade in L
		{$Duration: 1200, x: 0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade out R
		, { $Duration: 1200, x: -0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade in R
		, { $Duration: 1200, x: -0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade out L
		, { $Duration: 1200, x: 0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }

	//Fade in T
		, { $Duration: 1200, y: 0.3, $During: { $Top: [0.3, 0.7] }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade out B
		, { $Duration: 1200, y: -0.3, $SlideOut: true, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade in B
		, { $Duration: 1200, y: -0.3, $During: { $Top: [0.3, 0.7] }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade out T
		, { $Duration: 1200, y: 0.3, $SlideOut: true, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }

	//Fade in LR
		, { $Duration: 1200, x: 0.3, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $ChessMode: { $Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade out LR
		, { $Duration: 1200, x: 0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade in TB
		, { $Duration: 1200, y: 0.3, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode: { $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade out TB
		, { $Duration: 1200, y: 0.3, $Rows: 2, $SlideOut: true, $ChessMode: { $Row: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }

	//Fade in LR Chess
		, { $Duration: 1200, y: 0.3, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade out LR Chess
		, { $Duration: 1200, y: -0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade in TB Chess
		, { $Duration: 1200, x: 0.3, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade out TB Chess
		, { $Duration: 1200, x: -0.3, $Rows: 2, $SlideOut: true, $ChessMode: { $Row: 3 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }

	//Fade in Corners
		, { $Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }
	//Fade out Corners
		, { $Duration: 1200, x: 0.3, y: 0.3, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2, $Outside: true }

	//Fade Clip in H
		, { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade Clip out H
		, { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade Clip in V
		, { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
	//Fade Clip out V
		, { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $JssorEasing$.$EaseOutCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }
		];

	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
		}
	};

	var jssor_slider1 = new $JssorSlider$("slider1_container", options);
	//responsive code begin
	//you can remove responsive code if you don't want the slider scales while window resizes
	function ScaleSlider() {
		var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
		if (parentWidth)
			jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
		else
			window.setTimeout(ScaleSlider, 30);
	}
	ScaleSlider();

	$(window).bind("load", ScaleSlider);
	$(window).bind("resize", ScaleSlider);
	$(window).bind("orientationchange", ScaleSlider);
	//responsive code end
});



幻灯片 轮播 滑动图片

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

JS仿360旅游首页幻灯片效果代码

JS带图片标题自动播放的幻灯片特效

JS视差滑块幻灯片特效

jQuery自动播放淡入淡出的幻灯片特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿淘宝首页缓冲幻灯片特效

jquery实现4款自定义图片切换幻灯片js特效

jquery仿支付宝全屏图片幻灯片淡出淡进切换特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现 ChinaJoy2014专题幻灯片特效

jQuery幻灯片插件,按钮控制图片过渡特效

jquery仿百度百科2014新首页幻灯片特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

jquery仿腾讯新闻网站带缩略图的幻灯片切换代码_js代码

jquery仿搜狐2014巴西世界杯专题幻灯片特效

jquery仿新浪2014成都车展幻灯片

jquery仿网易2014巴西世界杯专题幻灯片特效

jquery仿腾讯网新闻图片特效带缩略图的幻灯片切换特效

仿车轮网带左右滚动JS焦点图轮播特效代码

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

jquery五屏焦点幻灯轮播特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿微运5.0网站全屏图片轮播特效

jquery仿华谊兄弟首页3D图片轮播特效

jquery SuperSlide插件实现商品轮播切换滚动特效

jQuery实现左右布局带缩略图轮播图特效

jquery实现带按钮控制轮播焦点图特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现数字焦点图轮播特效

jquery实现选项卡形式,四屏焦点图片轮播特效,带控制的选项卡轮播

win8扁平风格宽屏焦点图片动画轮播特效

CSS3实现手风琴叠加图片自动轮播特效

jQuery实现五屏上下轮播焦点图特效

CSS+JS实现滚动轮播图特效,带数字上下箭头切换功能

js实现图片幻灯片轮播图切换特效代码

js实现从两侧向中间拼合图片幻灯片轮播切换特效代码

js仿QQ软件官网平滑滚动图片,幻灯片轮播特效代码

友荐云推荐
大家说 此评论不代表本站观点