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

jQuery全屏3D旋转木马图片切换特效

发布时间:2016-03-12 16:12:47    您是第0位浏览者

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

jQuery全屏3D旋转木马图片切换特效
//图弹窗
jQuery(document).ready(function() {
	jQuery("a[class*=fancybox]").fancybox({
		'overlayOpacity'	:	0.7,
		'overlayColor'		:	'#000000',
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'easingIn'      	: 'easeOutBack',
		'easingOut'     	: 'easeInBack',
		'speedIn' 			: '700',
		'centerOnScroll'	: true
	});
});
//图滚动
jQuery.noConflict();
jQuery(window).load(function(){
	var $featured_content = jQuery('#featured'),
		et_disable_toptier = jQuery("meta[name=et_disable_toptier]").attr('content'),
		et_cufon = jQuery("meta[name=et_cufon]").attr('content'),
		et_featured_slider_pause = jQuery("meta[name=et_featured_slider_pause]").attr('content'),
		et_featured_slider_auto = jQuery("meta[name=et_featured_slider_auto]").attr('content'),
		et_featured_auto_speed = jQuery("meta[name=et_featured_auto_speed]").attr('content');
				
	if ($featured_content.length) {
		var $featured_slides = $featured_content.find('.slide').show(),
			slides_pos = [],
			slides_zindex = [],
			active_slide_width = 500,
			small_slide_width = 250,
			slide_margin = 16,
			featured_animation = 'easeInOutQuad', //'easeInOutQuad','easeInOutQuint', 'easeInOutQuart'
			et_animation_running = false,
			last_slide = false,
			pause_scroll = false,
			top_slide_pos,
			left_slide_pos,
			slide_opacity;
		
		$featured_content.css( 'backgroundImage', 'none' );
		
		$featured_slides.each(function(index, domEle){
			var $this_slide = jQuery(domEle);
			
			top_slide_pos = 82;
			slide_opacity = 0.3;
			
			if ( index === 0 ) {
				top_slide_pos = 0;
				slide_opacity = 1;
				left_slide_pos = 230;
			}
			if ( index === 1 ) left_slide_pos = 620;
			if ( index === 2 ) left_slide_pos = 90;
			if ( index > 2 ) {
				if ( index % 2 === 1 ) left_slide_pos = slides_pos[index-2].left + small_slide_width + slide_margin;
				else left_slide_pos = slides_pos[index-2].left - small_slide_width - slide_margin;
			}
			
			if ( index !== 0 ) {
				$this_slide.find('img').attr({
					width: '250',
					height: '169'
				});
			}
							
			slides_pos[index] = {
				width: $this_slide.width(),
				top: top_slide_pos,
				left: left_slide_pos,
				opacity: slide_opacity
			};
			
			$this_slide.css('zIndex',$featured_slides.length-index);
			slides_zindex[index] = $this_slide.css('zIndex');
			
			$this_slide.animate(slides_pos[index],100,function(){
				// fixes the slide title display bug in Opera
				jQuery(this).css( 'width', 'auto' );
			});
			jQuery(domEle).data('slide_pos',index);
		});
		
		jQuery('a.nextslide').live('click',function(event){
			event.preventDefault();
			if (!et_animation_running) rotate_slide('next');
			if ( typeof(et_auto_animation) !== 'undefined' ) clearInterval(et_auto_animation);
		});
		
		jQuery('a.prevslide').live('click',function(event){
			event.preventDefault();
			if (!et_animation_running) rotate_slide('prev');
			if ( typeof(et_auto_animation) !== 'undefined' ) clearInterval(et_auto_animation);
		});
		
		$featured_slides.hover(function(){
			if ( !et_animation_running ) {
				if ( jQuery(this).hasClass('active') ){
					jQuery(this).find('.additional').stop(true, true).animate({'opacity':'show'},300);
				}
			}
			if ( et_featured_slider_pause == 1 ) pause_scroll = true;
		},function(){
			if ( !et_animation_running ) {
				jQuery(this).find('.additional').stop(true, true).animate({'opacity':'hide'},300);
			}
			if ( et_featured_slider_pause == 1 ) pause_scroll = false;
		});
		
		var et_mousex = 0,
			et_mousey = 0,
			featured_activeslide_x = $featured_content.find('.container').offset().left + 230,
			featured_activeslide_y = $featured_content.find('.container').offset().top;
		
		jQuery(document).mousemove(function(e){
			et_mousex = e.pageX;
			et_mousey = e.pageY;
		});
		 
		function rotate_slide(direction){
			$featured_slides.removeClass('active');
							
			$featured_slides.each(function(index, domEle){
				var $this_slide = jQuery(domEle),
					next_slide_num = $this_slide.data('slide_pos');
				
				et_animation_running = true;	
				last_slide = false;
				
				$featured_slides.find('.additional').css('display','none');
				
				if ( direction === 'next' ){
					if ( next_slide_num === 0 ) next_slide_num = 2;
					else if ( next_slide_num === 1 ) next_slide_num = 0;
					else if ( $featured_slides.length % 2 === 0 && next_slide_num === ( $featured_slides.length - 2 ) ) {
						next_slide_num = $featured_slides.length - 1;
					}
					else {
						if ( next_slide_num !== ($featured_slides.length - 1) ) {
							if ( next_slide_num % 2 === 0 )  next_slide_num = next_slide_num + 2;
							else next_slide_num = next_slide_num - 2;
						} else {
							if ( $featured_slides.length % 2 === 0 ) {
								if ( next_slide_num % 2 === 0 )  next_slide_num = next_slide_num + 2;
								else next_slide_num = next_slide_num - 2;
							}
							else { 
								next_slide_num = $featured_slides.length - 2;
								last_slide = true;
							}
						}
					}
				} else {
					if ( next_slide_num === 0 ) next_slide_num = 1;
					else if ( $featured_slides.length % 2 === 0 && next_slide_num === ( $featured_slides.length - 1 ) ) {
						next_slide_num = $featured_slides.length - 2;
					}
					else {
						if ( $featured_slides.length % 2 === 0 ) {
							if ( next_slide_num % 2 === 0 ) next_slide_num = next_slide_num - 2;
							else next_slide_num = next_slide_num + 2;
						} else {
							if ( next_slide_num !== ($featured_slides.length - 2) ) {
								if ( next_slide_num % 2 === 0 ) next_slide_num = next_slide_num - 2;
								else next_slide_num = next_slide_num + 2;
							} else {
								next_slide_num = $featured_slides.length-1;
								last_slide = true;
							}
						}
					}
				}
							
				if ( last_slide ) {
					$this_slide.css('left',slides_pos[next_slide_num].left);
				}
									
				$this_slide.stop(true, true).animate(slides_pos[next_slide_num],600,featured_animation,function(){
					if ( index === $featured_slides.length - 1 ) et_animation_running = false;
									
					if ( !et_animation_running ) {
						if ( et_mousex > featured_activeslide_x && et_mousex < (featured_activeslide_x + 500) && et_mousey > featured_activeslide_y && et_mousey < (featured_activeslide_y + 335) ){
							if ( next_slide_num === 0 ) $featured_content.find('.slide').filter(':eq('+($featured_slides.length - 1)+')').find('.additional').stop(true, true).animate({'opacity':'show'},300);
							else $featured_content.find('.active .additional').stop(true, true).animate({'opacity':'show'},300);
							
							if ( et_featured_slider_pause == 1 ) pause_scroll = true;
						}
					}
					
					// fixes the slide title display bug in Opera
					jQuery(this).css( 'width', 'auto' );
				});
				if ( next_slide_num != 0 ) {
					$this_slide.find('img').stop(true, true).animate({'width':'250px','height':'169px'},600,featured_animation);
				}
				else { 
					$this_slide.find('img').stop(true, true).animate({'width':'500px','height':'335px'},600,featured_animation,function(){
						$this_slide.addClass('active');
					});
				}
					
				setTimeout(function(){
					$this_slide.css({zIndex: slides_zindex[next_slide_num]});
				},300);
				
				$this_slide.data('slide_pos',next_slide_num);
			});
		}
		
		if ( et_featured_slider_auto == 1 ) {
			et_auto_animation = setInterval(function(){
				if ( !pause_scroll ) rotate_slide('next');
			}, et_featured_auto_speed);
		}
		
		if ( $featured_content.find('.slide').length == 1 ){
			$featured_content.find('.slide').css({'position':'absolute','top':'0','left':'0'}).show();
			jQuery('#featured a.prevslide, #featured a.nextslide').hide();
		}
	}
});



旋转木马 图片切换 3d

jQuery图片旋转木马焦点图切换特效代码

高性能的jQuery/Zepto 3D旋转木马插件

jQuery全屏3D旋转木马图片切换特效

jquery实现led广告牌旋转图片切换特效

jquery焦点选项卡图片切换特效,支持自动播放

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

js myfocus焦点图插件,实现24种焦点图片切换特效

jquery+html5自适应屏幕宽度网站焦点图片切换特效

jquery实现网站响应式图片切换特效

jquery实现带爆炸动画图片切换特效

css3图片切换类似滤镜百叶窗图片切换特效

jQuery实现图片从下往上滑动切换效果_js图片切换特效代码

jQuery带缩略图的全屏幻灯片图片切换特效代码

jQuery右侧动态缩放图片切换特效

jquery仿京东商城首页图片切换特效代码

jQuery实现平滑缩放图片切换幻灯片特效代码

jQuery仿腾讯qq空间图片相册遮罩层图片切换特效代码

jQuery 实现3D堆叠式图片切换特效代码