9 changed files with 20484 additions and 1 deletions
Binary file not shown.
@ -1,3 +1,6 @@ |
|||||||
# open-JSD-9261 |
# open-JSD-9261 |
||||||
|
|
||||||
JSD-9261 网页框轮播+图片方法 |
JSD-9261 网页框轮播+图片方法\ |
||||||
|
免责说明：该源码为第三方爱好者提供，不保证源码和方案的可靠性，也不提供任何形式的源码教学指导和协助！\ |
||||||
|
仅作为开发者学习参考使用！禁止用于任何商业用途！\ |
||||||
|
为保护开发者隐私，开发者信息已隐去！若原开发者希望公开自己的信息，可联系hugh处理。 |
||||||
@ -0,0 +1,458 @@ |
|||||||
|
/** |
||||||
|
* Author: Vinayak Rangnathrao Jadhav |
||||||
|
* Project: jR3DCarousel |
||||||
|
* Version: 1.0.5 |
||||||
|
**/ |
||||||
|
(function (factory) { |
||||||
|
if (typeof define === "function" && define.amd) { |
||||||
|
define(["jquery"], factory); |
||||||
|
} else if (typeof exports === "object") { |
||||||
|
module.exports = factory(require("jquery")); |
||||||
|
} else { |
||||||
|
factory(jQuery); |
||||||
|
} |
||||||
|
})(function($){ |
||||||
|
|
||||||
|
$.fn.jR3DCarousel = function(options){ |
||||||
|
var _defaults = { |
||||||
|
width : innerWidth, /* largest allowed width */ |
||||||
|
height: innerHeight, /* largest allowed height */ |
||||||
|
slides : [], /* array of images source, optional in case of custom template */ |
||||||
|
slideLayout : 'fill', /* contain | fill | cover */ |
||||||
|
perspective: 0, /* perspective - default is dynamic, perpendicular */ |
||||||
|
animation: 'slide3D', /* slide | slide3D | scroll | scroll3D | fade */ |
||||||
|
animationCurve: 'ease', /* ease | ease-in | ease-out | ease-in-out | linear | bezier */ |
||||||
|
animationDuration: 700, /* duration of animation transition in milliseconds*/ |
||||||
|
animationInterval: 2000, /* interval between transitions or show time of per slide in milliseconds */ |
||||||
|
autoplay: true, /* start playing Carousel continuously, pauses when slide is hovered */ |
||||||
|
controls: true, /* control buttons */ |
||||||
|
slideClass: 'jR3DCarouselSlide',/* name of the css class of slides in custom template */ |
||||||
|
navigation: 'circles', /* circles | squares | '' */ |
||||||
|
rotationDirection: 'rtl', /* rtl - right to left | ltr - left to right */ |
||||||
|
onSlideShow: function(){} /* callback when Slide show event occurs */ |
||||||
|
} |
||||||
|
|
||||||
|
var _settings = $.extend( true, {}, _defaults, options ); |
||||||
|
var _container = this; |
||||||
|
var _width = _settings.width; |
||||||
|
var _height = _settings.height; |
||||||
|
var _aspectRatio = _settings.width/_settings.height; |
||||||
|
var _jR3DCarouselDiv = $( "<div class='jR3DCarousel' />" ) |
||||||
|
.css({ width: '100%', height: '100%', transition:'transform '+_settings.animationDuration+'ms '+_settings.animationCurve, 'transformStyle': 'preserve-3d' }) |
||||||
|
.appendTo(_container); |
||||||
|
var _currentSlideIndex = 0; |
||||||
|
var _targetSlideIndex = 1; |
||||||
|
var _animations = new Animations(); |
||||||
|
var _previousButton; |
||||||
|
var _nextButton; |
||||||
|
var _timer; |
||||||
|
var _baseAngle; |
||||||
|
var _rotationAngle = 0; |
||||||
|
var _translateZ; |
||||||
|
var _perspective; |
||||||
|
var _transform; |
||||||
|
var _noOfSlides = _settings.slides.length || _container.find('.'+_settings.slideClass).length; |
||||||
|
|
||||||
|
(function setup(){ |
||||||
|
|
||||||
|
/* create jR3DCarousel */ |
||||||
|
createjR3DCarousel(); |
||||||
|
|
||||||
|
/* create control buttons */ |
||||||
|
if(_settings.controls){ |
||||||
|
_createControls(); |
||||||
|
} |
||||||
|
|
||||||
|
/* create navigation bar */ |
||||||
|
if(_settings.navigation){ |
||||||
|
_createNavigation(); |
||||||
|
} |
||||||
|
|
||||||
|
/* adjust size according to device */ |
||||||
|
addEventListener('resize', _maintainResposive); |
||||||
|
|
||||||
|
_maintainResposive(); |
||||||
|
|
||||||
|
/* start jR3DCarousel if autoplay */ |
||||||
|
if(_settings.autoplay){ |
||||||
|
|
||||||
|
/* event handlers */ |
||||||
|
document.addEventListener('visibilitychange', handleVisibilityChange); |
||||||
|
|
||||||
|
addEventListener("beforeunload", function () { |
||||||
|
document.removeEventListener('visibilitychange', handleVisibilityChange); |
||||||
|
}); |
||||||
|
|
||||||
|
function handleVisibilityChange() { |
||||||
|
if (document.hidden) { |
||||||
|
//console.log("hidden.. stop running expensive task")
|
||||||
|
_pausejR3DCarousel(); |
||||||
|
} else { |
||||||
|
//console.log("not hidden.. page has focus, begin running task")
|
||||||
|
_playjR3DCarousel(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_container.hover(function(){ |
||||||
|
clearTimeout($(this).data('timeout')); |
||||||
|
_pausejR3DCarousel();
|
||||||
|
},function(){
|
||||||
|
$(this).data('timeout', setTimeout(function(){ |
||||||
|
_playjR3DCarousel(); |
||||||
|
}, _settings.animationInterval+_settings.animationDuration)); |
||||||
|
}); |
||||||
|
|
||||||
|
/* start jR3DCarousel if autoplay */ |
||||||
|
_playjR3DCarousel(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function createjR3DCarousel(){ |
||||||
|
/* compute translate and perspective */ |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_translateZ = (_height/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_height/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
} |
||||||
|
|
||||||
|
/* compute base angle */ |
||||||
|
_baseAngle = 360 / _noOfSlides; |
||||||
|
|
||||||
|
/* create jR3DCarousel slide stack */ |
||||||
|
if(_settings.slides.length){
|
||||||
|
for(var i = 0; i < _settings.slides.length; i++){ |
||||||
|
var slide = $( "<div class='jR3DCarouselSlide' data-index="+i+" />" ) |
||||||
|
.append( "<img src='"+_settings.slides[i].src+"' alt='"+_settings.slides[i].alt+"' />" ); |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_transform = 'rotateX('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
} |
||||||
|
slide.css({ transform: _transform }); |
||||||
|
_jR3DCarouselDiv.append(slide); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
_container.find('.'+_settings.slideClass).each(function(i){ |
||||||
|
var slide = $(this).attr('data-index', i); |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_transform = 'rotateX('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
} |
||||||
|
slide = slide.css({ transform: _transform }).detach(); |
||||||
|
_jR3DCarouselDiv.append(slide); |
||||||
|
}); |
||||||
|
} |
||||||
|
_jR3DCarouselDiv.find('.'+_settings.slideClass).css({position: 'absolute', left: 0, top:0, width:'100%', height:'100%', backfaceVisibility: 'hidden'}) |
||||||
|
.find('img').css({ width:'100%', height:'100%', objectFit:_settings.slideLayout }); |
||||||
|
_perspective = _settings.perspective || _perspective; |
||||||
|
_container.css({ perspective: _perspective, width: _width+'px', height: _height+'px', position: "relative", overflow: 'visible'}); |
||||||
|
} |
||||||
|
|
||||||
|
function _createControls(){ |
||||||
|
if(_settings.rotationDirection == 'rtl'){ |
||||||
|
_previousButton = $( "<div class='previous controls' style='left: 0.1em;'>⟨</div>"); |
||||||
|
_nextButton = $( "<div class='next controls' style='right: 0.1em;'>⟩</div>"); |
||||||
|
}else{ |
||||||
|
_previousButton = $( "<div class='previous controls' style='right: 0.1em;'>⟩</div>"); |
||||||
|
_nextButton = $( "<div class='next controls' style='left: 0.1em;'>⟨</div>"); |
||||||
|
} |
||||||
|
|
||||||
|
_previousButton.add(_nextButton) |
||||||
|
.css({position: 'absolute', top:'50%', zIndex:1, transform: 'translateY(-50%)', fontSize: '4em', color: 'rgba(255, 255, 255, 0.97)', cursor:'pointer', userSelect: 'none'}) |
||||||
|
.appendTo(_container) |
||||||
|
.hide(); |
||||||
|
|
||||||
|
/* event handlers */ |
||||||
|
_previousButton.on('click', function(){ |
||||||
|
_playPreviousSlide(); |
||||||
|
}); |
||||||
|
_nextButton.on('click', function(){ |
||||||
|
_playNextSlide(); |
||||||
|
}); |
||||||
|
|
||||||
|
/* event handlers */ |
||||||
|
_container.on('mouseenter touchstart',function(){ |
||||||
|
_previousButton.add(_nextButton).show(); |
||||||
|
}) |
||||||
|
.on('mouseleave touchcancel',function(){ |
||||||
|
_previousButton.add(_nextButton).hide(); |
||||||
|
}) |
||||||
|
|
||||||
|
_previousButton.hover(function(){ |
||||||
|
_previousButton.css({color: 'rgba(201, 201, 201, 0.97)'}); |
||||||
|
},function(){ |
||||||
|
_previousButton.css({color: 'rgba(255, 255, 255, 0.97)'}); |
||||||
|
}); |
||||||
|
_nextButton.hover(function(){ |
||||||
|
_nextButton.css({color: 'rgba(201, 201, 201, 0.97)'}); |
||||||
|
},function(){ |
||||||
|
_nextButton.css({color: 'rgba(255, 255, 255, 0.97)'}); |
||||||
|
}); |
||||||
|
|
||||||
|
/* keyboard navigation keys support */ |
||||||
|
$(document).on('keydown', function(e){ |
||||||
|
var rect = _container[0].getBoundingClientRect(); |
||||||
|
var inView = rect.bottom > 0 && rect.right > 0 && |
||||||
|
rect.left < (innerWidth || document.documentElement.clientWidth) && |
||||||
|
rect.top < (innerHeight || document.documentElement.clientHeight); |
||||||
|
|
||||||
|
if(inView && e.which == 37){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
if(_settings.rotationDirection == 'rtl'){ |
||||||
|
_previousButton.click(); |
||||||
|
}else{ |
||||||
|
_nextButton.click(); |
||||||
|
} |
||||||
|
}else if(inView && e.which == 39){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
if(_settings.rotationDirection == 'rtl'){ |
||||||
|
_nextButton.click(); |
||||||
|
}else{ |
||||||
|
_previousButton.click(); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
/* touch navigation support */ |
||||||
|
_swipedetect(_container, function(swipedir){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
/* swipedir contains either "none", "left", "right", "up", or "down" */ |
||||||
|
if (swipedir =='left'){ |
||||||
|
_nextButton.click(); |
||||||
|
}else if (swipedir =='right'){ |
||||||
|
_previousButton.click(); |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
if (swipedir =='down'){ |
||||||
|
_nextButton.click(); |
||||||
|
}else if (swipedir =='up'){ |
||||||
|
_previousButton.click(); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function _createNavigation(){ |
||||||
|
var _navigation = $('<div class=navigation />').css({ position: 'absolute', bottom: 0, right: 0 }); |
||||||
|
for(var i = 0; i < _noOfSlides; i++){ |
||||||
|
_navigation.append('<div class=nav></div>'); |
||||||
|
} |
||||||
|
if(_settings.navigation == 'circles'){ |
||||||
|
_navigation.find('.nav').css({ borderRadius: '12px' }); |
||||||
|
} |
||||||
|
_navigation.find('.nav').css({ display: 'inline-block', margin: '5px', cursor: 'pointer', backgroundColor: 'rgba(255, 255, 255, 0.77)', width: '12px', height: '12px', transition: 'all '+_settings.animationDuration+'ms ease' }) |
||||||
|
.first().css({ backgroundColor: 'rgba(0, 0, 0, 1)' }); |
||||||
|
_jR3DCarouselDiv.after(_navigation); |
||||||
|
|
||||||
|
/* event handler */ |
||||||
|
_container.on('click', '.nav', function(){ |
||||||
|
_playSlideByIndex($(this).index()); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
})(); |
||||||
|
|
||||||
|
function _playjR3DCarousel(){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
_timer = setInterval(_playNextSlide, _settings.animationInterval+_settings.animationDuration); |
||||||
|
//console.log("_playjR3DCarousel called "+_timer);
|
||||||
|
} |
||||||
|
function _pausejR3DCarousel(){ |
||||||
|
if(_timer){ |
||||||
|
//console.log("_pausejR3DCarousel called "+_timer);
|
||||||
|
clearInterval(_timer); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function _playNextSlide(){ |
||||||
|
_targetSlideIndex = _currentSlideIndex + 1; |
||||||
|
_animations.run(_settings.animation, _targetSlideIndex); |
||||||
|
_slideCarouseld(); |
||||||
|
} |
||||||
|
|
||||||
|
function _playPreviousSlide(){ |
||||||
|
_targetSlideIndex = _currentSlideIndex - 1; |
||||||
|
_animations.run(_settings.animation, _targetSlideIndex); |
||||||
|
_slideCarouseld(); |
||||||
|
} |
||||||
|
|
||||||
|
function _playSlideByIndex(relativeSlideIndex){ |
||||||
|
var _currentRoundNo = Math.floor(_currentSlideIndex / _noOfSlides); |
||||||
|
_targetSlideIndex = _currentRoundNo *_noOfSlides + relativeSlideIndex; |
||||||
|
_animations.run(_settings.animation, _targetSlideIndex); |
||||||
|
_slideCarouseld(); |
||||||
|
} |
||||||
|
|
||||||
|
function _getPreviousSlide(){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass).eq((_currentSlideIndex-1) % _noOfSlides); |
||||||
|
} |
||||||
|
function _getCurrentSlide(){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass).eq(_currentSlideIndex % _noOfSlides); |
||||||
|
} |
||||||
|
function _getNextSlide(){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass).eq((_currentSlideIndex+1) % _noOfSlides); |
||||||
|
} |
||||||
|
function _getSlideByIndex(idx){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass+'[data-index='+idx+']'); |
||||||
|
} |
||||||
|
|
||||||
|
function Animations(){ |
||||||
|
this.animations = { |
||||||
|
slide : _slide, |
||||||
|
slide3D : _slide3D, |
||||||
|
scroll: _scroll, |
||||||
|
scroll3D: _scroll3D, |
||||||
|
fade: _fade |
||||||
|
} |
||||||
|
} |
||||||
|
Animations.prototype.run = function run(animation, targetSlideIndex){ |
||||||
|
this.animations[animation](targetSlideIndex); |
||||||
|
} |
||||||
|
|
||||||
|
function _slide(targetSlideIndex){ |
||||||
|
_container.css({ perspective: '', overflow: 'hidden' }); |
||||||
|
_rotationAngle = _baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _slide3D(targetSlideIndex){ |
||||||
|
_container.css({ perspective: _perspective, overflow: 'visible' }); |
||||||
|
_rotationAngle = _baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _scroll(targetSlideIndex){ |
||||||
|
_container.css({ perspective: '', overflow: 'hidden' }); |
||||||
|
_rotationAngle=_baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateX('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _scroll3D(targetSlideIndex){ |
||||||
|
_container.css({ perspective: _perspective, overflow: 'visible' }); |
||||||
|
_rotationAngle=_baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateX('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _fade(targetSlideIndex){ |
||||||
|
_jR3DCarouselDiv.css({ transition: 'opacity '+ _settings.animationDuration+'ms '+_settings.animationCurve, opacity: 0}); |
||||||
|
_rotationAngle = _baseAngle * targetSlideIndex;
|
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)'}); |
||||||
|
_jR3DCarouselDiv.css({ opacity: 1 }); |
||||||
|
} |
||||||
|
|
||||||
|
function _slideCarouseld(){ |
||||||
|
_container.find('.nav').css({ backgroundColor: 'rgba(255, 255, 255, 0.77)' }) |
||||||
|
.eq(_targetSlideIndex % _noOfSlides).css({ backgroundColor: 'rgba(0, 0, 0, 0.77)' }); |
||||||
|
|
||||||
|
_currentSlideIndex = Math.round(_rotationAngle/_baseAngle); |
||||||
|
//console.log("_currentSlideIndex " +_currentSlideIndex)
|
||||||
|
_settings.onSlideShow.call(this, _getCurrentSlide()); |
||||||
|
} |
||||||
|
|
||||||
|
function _maintainResposive(){ |
||||||
|
_container.width('100%'); |
||||||
|
_jR3DCarouselDiv.hide(); |
||||||
|
_width = _container.width() < _settings.width ? _container.width() : _settings.width; |
||||||
|
_height = _width/_aspectRatio; |
||||||
|
_container.css({width: _width+'px', height: _height+'px' }); |
||||||
|
|
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_translateZ = (_height/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_height/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
} |
||||||
|
_container.find('.'+_settings.slideClass).each(function(i){ |
||||||
|
var slide = $(this); |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_transform = 'rotateX('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
} |
||||||
|
slide.css({ transform: _transform }); |
||||||
|
}); |
||||||
|
_perspective = _settings.perspective || _perspective; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)' }); |
||||||
|
_jR3DCarouselDiv.show(); |
||||||
|
_container.css({ perspective: _perspective }); |
||||||
|
}
|
||||||
|
|
||||||
|
function _swipedetect(el, handleswipe){ |
||||||
|
var touchsurface = el, swipedir, startX, startY, distX, distY, |
||||||
|
threshold = 20, //required min distance traveled to be considered swipe
|
||||||
|
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
|
||||||
|
allowedTime = 700, // maximum time allowed to travel that distance
|
||||||
|
elapsedTime, startTime |
||||||
|
|
||||||
|
touchsurface.on('touchstart', function(e){ |
||||||
|
var touchobj = e.originalEvent.changedTouches[0] |
||||||
|
swipedir = 'none' |
||||||
|
startX = touchobj.pageX |
||||||
|
startY = touchobj.pageY |
||||||
|
startTime = new Date().getTime() // record time when finger first makes contact with surface
|
||||||
|
//e.preventDefault()
|
||||||
|
}) |
||||||
|
.on('touchmove', function(e){ |
||||||
|
e.preventDefault() // prevent scrolling when inside DIV
|
||||||
|
}) |
||||||
|
.on('touchend', function(e){ |
||||||
|
var touchobj = e.originalEvent.changedTouches[0] |
||||||
|
distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
|
||||||
|
distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
|
||||||
|
elapsedTime = new Date().getTime() - startTime // get time elapsed
|
||||||
|
if (elapsedTime <= allowedTime){ // first condition for awipe met
|
||||||
|
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
|
||||||
|
swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
|
||||||
|
} |
||||||
|
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
|
||||||
|
swipedir = (distY < 0)? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
|
||||||
|
} |
||||||
|
} |
||||||
|
handleswipe(swipedir) |
||||||
|
//e.preventDefault()
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/* public API */
|
||||||
|
this.showSlide = function(index){ |
||||||
|
var relativeSlideIndex = index % _noOfSlides; |
||||||
|
_playSlideByIndex(relativeSlideIndex); |
||||||
|
} |
||||||
|
this.getCurrentSlide = function(){ |
||||||
|
return _getCurrentSlide(); |
||||||
|
} |
||||||
|
this.getSlideByIndex = function(index){ |
||||||
|
return _getSlideByIndex(index); |
||||||
|
} |
||||||
|
this.showPreviousSlide = function(){ |
||||||
|
_previousButton.click(); |
||||||
|
} |
||||||
|
this.showNextSlide = function(){ |
||||||
|
_nextButton.click(); |
||||||
|
} |
||||||
|
this.playCarousel = function(){ |
||||||
|
_playjR3DCarousel(); |
||||||
|
} |
||||||
|
this.pauseCarousel = function(){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
} |
||||||
|
|
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
1.报表文件加载js文件:jR3DCarousel.js |
||||||
|
2.报表文件的form初始化事件中添加js代码 |
||||||
|
var contentHtml = '<div id="loop-show-images-qazwsx123" style="position:absolute;z-index: 2000;display:none"></div>'; |
||||||
|
$('body').prepend(contentHtml); |
||||||
|
|
||||||
|
|
||||||
|
var contentHtml = '<div id="loop-show-images-qazwsx123-body" style="position: absolute;width: 100%;height: 100%;z-index: 1000;display:none;background-color: rgba(255,255,255,0.6);"></div>'; |
||||||
|
$('body').prepend(contentHtml); |
||||||
|
|
||||||
|
$("body").on('click', "#loop-show-images-qazwsx123-body", function(){ |
||||||
|
$("#loop-show-images-qazwsx123").css("display","none"); |
||||||
|
$("#loop-show-images-qazwsx123-body").css("display","none"); |
||||||
|
$("#loop-show-images-qazwsx123").empty(); |
||||||
|
}) |
||||||
|
|
||||||
|
3.在4个网页控件上覆盖了4个按钮(button0,button1,button2,button3),用于触发单击事件 |
||||||
|
|
||||||
|
$("#loop-show-images-qazwsx123").css("display","block"); |
||||||
|
$("#loop-show-images-qazwsx123-body").css("display","block"); |
||||||
|
|
||||||
|
//debugger; |
||||||
|
var sizeWidth = $('body').width()*0.6; |
||||||
|
var sizeHeight = $('body').height()*0.6; |
||||||
|
|
||||||
|
var leftValue = $('body').width()*0.2+"px"; |
||||||
|
var topValue = $('body').height()*0.2+"px"; |
||||||
|
$("#loop-show-images-qazwsx123").css("left",leftValue); |
||||||
|
$("#loop-show-images-qazwsx123").css("top",topValue); |
||||||
|
|
||||||
|
var slidesUrls = []; |
||||||
|
|
||||||
|
var slide = {}; |
||||||
|
if(isVideo1== '0') |
||||||
|
{ |
||||||
|
slide = {}; |
||||||
|
slide.src = url1; |
||||||
|
slidesUrls.push(slide); |
||||||
|
} |
||||||
|
|
||||||
|
if(isVideo2== '0') |
||||||
|
{ |
||||||
|
slide = {}; |
||||||
|
slide.src = url2; |
||||||
|
slidesUrls.push(slide); |
||||||
|
} |
||||||
|
|
||||||
|
if(isVideo3== '0') |
||||||
|
{ |
||||||
|
slide = {}; |
||||||
|
slide.src = url3; |
||||||
|
slidesUrls.push(slide); |
||||||
|
} |
||||||
|
|
||||||
|
if(isVideo4== '0') |
||||||
|
{ |
||||||
|
slide = {}; |
||||||
|
slide.src = url4; |
||||||
|
slidesUrls.push(slide); |
||||||
|
} |
||||||
|
|
||||||
|
$("#loop-show-images-qazwsx123").jR3DCarousel({ |
||||||
|
width :sizeWidth, /* largest allowed width */ |
||||||
|
height: sizeHeight, /* largest allowed height */ |
||||||
|
slides : slidesUrls, /* array of images source, optional in case of custom template */ |
||||||
|
slideLayout : 'fill', /* contain | fill | cover */ |
||||||
|
perspective: 0, /* perspective - default is dynamic, perpendicular */ |
||||||
|
animation: 'slide3D', /* slide | slide3D | scroll | scroll3D | fade */ |
||||||
|
animationCurve: 'ease', /* ease | ease-in | ease-out | ease-in-out | linear | bezier */ |
||||||
|
animationDuration: 700, /* duration of animation transition in milliseconds*/ |
||||||
|
animationInterval: 2000, /* interval between transitions or show time of per slide in milliseconds */ |
||||||
|
autoplay: false, /* start playing Carousel continuously, pauses when slide is hovered */ |
||||||
|
controls: true, /* control buttons */ |
||||||
|
//slideClass: 'jR3DCarouselSlide',/* name of the css class of slides in custom template */ |
||||||
|
navigation: 'circles', /* circles | squares | '' */ |
||||||
|
rotationDirection: 'rtl', /* rtl - right to left | ltr - left to right */ |
||||||
|
}); |
||||||
Binary file not shown.
@ -0,0 +1,16 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
||||||
|
<plugin> |
||||||
|
<id>com.fr.plugin.third.party.jsdjcgb</id> |
||||||
|
<name><![CDATA[图片轮播]]></name> |
||||||
|
<active>yes</active> |
||||||
|
<version>0.1</version> |
||||||
|
<env-version>10.0</env-version> |
||||||
|
<jartime>2019-01-01</jartime> |
||||||
|
<vendor>追心</vendor> |
||||||
|
<description><![CDATA[]]></description> |
||||||
|
<change-notes><![CDATA[]]></change-notes> |
||||||
|
<extra-form> |
||||||
|
<JavaScriptFileHandler class="com.fr.plugin.third.party.jsdjcgb.web.ResourceJavaScriptFileHandler"/> |
||||||
|
</extra-form> |
||||||
|
<function-recorder class="com.fr.plugin.third.party.jsdjcgb.web.ResourceJavaScriptFileHandler"/> |
||||||
|
</plugin> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
package com.fr.plugin.third.party.jsdjcgb.web; |
||||||
|
|
||||||
|
import com.fr.intelli.record.Focus; |
||||||
|
import com.fr.intelli.record.Original; |
||||||
|
import com.fr.record.analyzer.EnableMetrics; |
||||||
|
import com.fr.stable.fun.Authorize; |
||||||
|
import com.fr.stable.fun.impl.AbstractJavaScriptFileHandler; |
||||||
|
|
||||||
|
@EnableMetrics |
||||||
|
@Authorize(callSignKey = "com.fr.plugin.third.party.jsdjcgb") |
||||||
|
public class ResourceJavaScriptFileHandler extends AbstractJavaScriptFileHandler { |
||||||
|
@Override |
||||||
|
@Focus(id = "com.fr.plugin.third.party.jsdjcgb", text = "plugin-jsdjcgb", source = Original.PLUGIN) |
||||||
|
public String[] pathsForFiles() { |
||||||
|
return new String[]{ |
||||||
|
"/com/fr/plugin/third/party/jsdjcgb/jR3DCarousel.js", |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,458 @@ |
|||||||
|
/** |
||||||
|
* Author: Vinayak Rangnathrao Jadhav |
||||||
|
* Project: jR3DCarousel |
||||||
|
* Version: 1.0.5 |
||||||
|
**/ |
||||||
|
(function (factory) { |
||||||
|
if (typeof define === "function" && define.amd) { |
||||||
|
define(["jquery"], factory); |
||||||
|
} else if (typeof exports === "object") { |
||||||
|
module.exports = factory(require("jquery")); |
||||||
|
} else { |
||||||
|
factory(jQuery); |
||||||
|
} |
||||||
|
})(function($){ |
||||||
|
|
||||||
|
$.fn.jR3DCarousel = function(options){ |
||||||
|
var _defaults = { |
||||||
|
width : innerWidth, /* largest allowed width */ |
||||||
|
height: innerHeight, /* largest allowed height */ |
||||||
|
slides : [], /* array of images source, optional in case of custom template */ |
||||||
|
slideLayout : 'fill', /* contain | fill | cover */ |
||||||
|
perspective: 0, /* perspective - default is dynamic, perpendicular */ |
||||||
|
animation: 'slide3D', /* slide | slide3D | scroll | scroll3D | fade */ |
||||||
|
animationCurve: 'ease', /* ease | ease-in | ease-out | ease-in-out | linear | bezier */ |
||||||
|
animationDuration: 700, /* duration of animation transition in milliseconds*/ |
||||||
|
animationInterval: 2000, /* interval between transitions or show time of per slide in milliseconds */ |
||||||
|
autoplay: true, /* start playing Carousel continuously, pauses when slide is hovered */ |
||||||
|
controls: true, /* control buttons */ |
||||||
|
slideClass: 'jR3DCarouselSlide',/* name of the css class of slides in custom template */ |
||||||
|
navigation: 'circles', /* circles | squares | '' */ |
||||||
|
rotationDirection: 'rtl', /* rtl - right to left | ltr - left to right */ |
||||||
|
onSlideShow: function(){} /* callback when Slide show event occurs */ |
||||||
|
} |
||||||
|
|
||||||
|
var _settings = $.extend( true, {}, _defaults, options ); |
||||||
|
var _container = this; |
||||||
|
var _width = _settings.width; |
||||||
|
var _height = _settings.height; |
||||||
|
var _aspectRatio = _settings.width/_settings.height; |
||||||
|
var _jR3DCarouselDiv = $( "<div class='jR3DCarousel' />" ) |
||||||
|
.css({ width: '100%', height: '100%', transition:'transform '+_settings.animationDuration+'ms '+_settings.animationCurve, 'transformStyle': 'preserve-3d' }) |
||||||
|
.appendTo(_container); |
||||||
|
var _currentSlideIndex = 0; |
||||||
|
var _targetSlideIndex = 1; |
||||||
|
var _animations = new Animations(); |
||||||
|
var _previousButton; |
||||||
|
var _nextButton; |
||||||
|
var _timer; |
||||||
|
var _baseAngle; |
||||||
|
var _rotationAngle = 0; |
||||||
|
var _translateZ; |
||||||
|
var _perspective; |
||||||
|
var _transform; |
||||||
|
var _noOfSlides = _settings.slides.length || _container.find('.'+_settings.slideClass).length; |
||||||
|
|
||||||
|
(function setup(){ |
||||||
|
|
||||||
|
/* create jR3DCarousel */ |
||||||
|
createjR3DCarousel(); |
||||||
|
|
||||||
|
/* create control buttons */ |
||||||
|
if(_settings.controls){ |
||||||
|
_createControls(); |
||||||
|
} |
||||||
|
|
||||||
|
/* create navigation bar */ |
||||||
|
if(_settings.navigation){ |
||||||
|
_createNavigation(); |
||||||
|
} |
||||||
|
|
||||||
|
/* adjust size according to device */ |
||||||
|
addEventListener('resize', _maintainResposive); |
||||||
|
|
||||||
|
_maintainResposive(); |
||||||
|
|
||||||
|
/* start jR3DCarousel if autoplay */ |
||||||
|
if(_settings.autoplay){ |
||||||
|
|
||||||
|
/* event handlers */ |
||||||
|
document.addEventListener('visibilitychange', handleVisibilityChange); |
||||||
|
|
||||||
|
addEventListener("beforeunload", function () { |
||||||
|
document.removeEventListener('visibilitychange', handleVisibilityChange); |
||||||
|
}); |
||||||
|
|
||||||
|
function handleVisibilityChange() { |
||||||
|
if (document.hidden) { |
||||||
|
//console.log("hidden.. stop running expensive task")
|
||||||
|
_pausejR3DCarousel(); |
||||||
|
} else { |
||||||
|
//console.log("not hidden.. page has focus, begin running task")
|
||||||
|
_playjR3DCarousel(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_container.hover(function(){ |
||||||
|
clearTimeout($(this).data('timeout')); |
||||||
|
_pausejR3DCarousel();
|
||||||
|
},function(){
|
||||||
|
$(this).data('timeout', setTimeout(function(){ |
||||||
|
_playjR3DCarousel(); |
||||||
|
}, _settings.animationInterval+_settings.animationDuration)); |
||||||
|
}); |
||||||
|
|
||||||
|
/* start jR3DCarousel if autoplay */ |
||||||
|
_playjR3DCarousel(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function createjR3DCarousel(){ |
||||||
|
/* compute translate and perspective */ |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_translateZ = (_height/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_height/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
} |
||||||
|
|
||||||
|
/* compute base angle */ |
||||||
|
_baseAngle = 360 / _noOfSlides; |
||||||
|
|
||||||
|
/* create jR3DCarousel slide stack */ |
||||||
|
if(_settings.slides.length){
|
||||||
|
for(var i = 0; i < _settings.slides.length; i++){ |
||||||
|
var slide = $( "<div class='jR3DCarouselSlide' data-index="+i+" />" ) |
||||||
|
.append( "<img src='"+_settings.slides[i].src+"' alt='"+_settings.slides[i].alt+"' />" ); |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_transform = 'rotateX('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
} |
||||||
|
slide.css({ transform: _transform }); |
||||||
|
_jR3DCarouselDiv.append(slide); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
_container.find('.'+_settings.slideClass).each(function(i){ |
||||||
|
var slide = $(this).attr('data-index', i); |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_transform = 'rotateX('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
} |
||||||
|
slide = slide.css({ transform: _transform }).detach(); |
||||||
|
_jR3DCarouselDiv.append(slide); |
||||||
|
}); |
||||||
|
} |
||||||
|
_jR3DCarouselDiv.find('.'+_settings.slideClass).css({position: 'absolute', left: 0, top:0, width:'100%', height:'100%', backfaceVisibility: 'hidden'}) |
||||||
|
.find('img').css({ width:'100%', height:'100%', objectFit:_settings.slideLayout }); |
||||||
|
_perspective = _settings.perspective || _perspective; |
||||||
|
_container.css({ perspective: _perspective, width: _width+'px', height: _height+'px', position: "relative", overflow: 'visible'}); |
||||||
|
} |
||||||
|
|
||||||
|
function _createControls(){ |
||||||
|
if(_settings.rotationDirection == 'rtl'){ |
||||||
|
_previousButton = $( "<div class='previous controls' style='left: 0.1em;'>⟨</div>"); |
||||||
|
_nextButton = $( "<div class='next controls' style='right: 0.1em;'>⟩</div>"); |
||||||
|
}else{ |
||||||
|
_previousButton = $( "<div class='previous controls' style='right: 0.1em;'>⟩</div>"); |
||||||
|
_nextButton = $( "<div class='next controls' style='left: 0.1em;'>⟨</div>"); |
||||||
|
} |
||||||
|
|
||||||
|
_previousButton.add(_nextButton) |
||||||
|
.css({position: 'absolute', top:'50%', zIndex:1, transform: 'translateY(-50%)', fontSize: '4em', color: 'rgba(255, 255, 255, 0.97)', cursor:'pointer', userSelect: 'none'}) |
||||||
|
.appendTo(_container) |
||||||
|
.hide(); |
||||||
|
|
||||||
|
/* event handlers */ |
||||||
|
_previousButton.on('click', function(){ |
||||||
|
_playPreviousSlide(); |
||||||
|
}); |
||||||
|
_nextButton.on('click', function(){ |
||||||
|
_playNextSlide(); |
||||||
|
}); |
||||||
|
|
||||||
|
/* event handlers */ |
||||||
|
_container.on('mouseenter touchstart',function(){ |
||||||
|
_previousButton.add(_nextButton).show(); |
||||||
|
}) |
||||||
|
.on('mouseleave touchcancel',function(){ |
||||||
|
_previousButton.add(_nextButton).hide(); |
||||||
|
}) |
||||||
|
|
||||||
|
_previousButton.hover(function(){ |
||||||
|
_previousButton.css({color: 'rgba(201, 201, 201, 0.97)'}); |
||||||
|
},function(){ |
||||||
|
_previousButton.css({color: 'rgba(255, 255, 255, 0.97)'}); |
||||||
|
}); |
||||||
|
_nextButton.hover(function(){ |
||||||
|
_nextButton.css({color: 'rgba(201, 201, 201, 0.97)'}); |
||||||
|
},function(){ |
||||||
|
_nextButton.css({color: 'rgba(255, 255, 255, 0.97)'}); |
||||||
|
}); |
||||||
|
|
||||||
|
/* keyboard navigation keys support */ |
||||||
|
$(document).on('keydown', function(e){ |
||||||
|
var rect = _container[0].getBoundingClientRect(); |
||||||
|
var inView = rect.bottom > 0 && rect.right > 0 && |
||||||
|
rect.left < (innerWidth || document.documentElement.clientWidth) && |
||||||
|
rect.top < (innerHeight || document.documentElement.clientHeight); |
||||||
|
|
||||||
|
if(inView && e.which == 37){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
if(_settings.rotationDirection == 'rtl'){ |
||||||
|
_previousButton.click(); |
||||||
|
}else{ |
||||||
|
_nextButton.click(); |
||||||
|
} |
||||||
|
}else if(inView && e.which == 39){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
if(_settings.rotationDirection == 'rtl'){ |
||||||
|
_nextButton.click(); |
||||||
|
}else{ |
||||||
|
_previousButton.click(); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
/* touch navigation support */ |
||||||
|
_swipedetect(_container, function(swipedir){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
/* swipedir contains either "none", "left", "right", "up", or "down" */ |
||||||
|
if (swipedir =='left'){ |
||||||
|
_nextButton.click(); |
||||||
|
}else if (swipedir =='right'){ |
||||||
|
_previousButton.click(); |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
if (swipedir =='down'){ |
||||||
|
_nextButton.click(); |
||||||
|
}else if (swipedir =='up'){ |
||||||
|
_previousButton.click(); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function _createNavigation(){ |
||||||
|
var _navigation = $('<div class=navigation />').css({ position: 'absolute', bottom: 0, right: 0 }); |
||||||
|
for(var i = 0; i < _noOfSlides; i++){ |
||||||
|
_navigation.append('<div class=nav></div>'); |
||||||
|
} |
||||||
|
if(_settings.navigation == 'circles'){ |
||||||
|
_navigation.find('.nav').css({ borderRadius: '12px' }); |
||||||
|
} |
||||||
|
_navigation.find('.nav').css({ display: 'inline-block', margin: '5px', cursor: 'pointer', backgroundColor: 'rgba(255, 255, 255, 0.77)', width: '12px', height: '12px', transition: 'all '+_settings.animationDuration+'ms ease' }) |
||||||
|
.first().css({ backgroundColor: 'rgba(0, 0, 0, 1)' }); |
||||||
|
_jR3DCarouselDiv.after(_navigation); |
||||||
|
|
||||||
|
/* event handler */ |
||||||
|
_container.on('click', '.nav', function(){ |
||||||
|
_playSlideByIndex($(this).index()); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
})(); |
||||||
|
|
||||||
|
function _playjR3DCarousel(){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
_timer = setInterval(_playNextSlide, _settings.animationInterval+_settings.animationDuration); |
||||||
|
//console.log("_playjR3DCarousel called "+_timer);
|
||||||
|
} |
||||||
|
function _pausejR3DCarousel(){ |
||||||
|
if(_timer){ |
||||||
|
//console.log("_pausejR3DCarousel called "+_timer);
|
||||||
|
clearInterval(_timer); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function _playNextSlide(){ |
||||||
|
_targetSlideIndex = _currentSlideIndex + 1; |
||||||
|
_animations.run(_settings.animation, _targetSlideIndex); |
||||||
|
_slideCarouseld(); |
||||||
|
} |
||||||
|
|
||||||
|
function _playPreviousSlide(){ |
||||||
|
_targetSlideIndex = _currentSlideIndex - 1; |
||||||
|
_animations.run(_settings.animation, _targetSlideIndex); |
||||||
|
_slideCarouseld(); |
||||||
|
} |
||||||
|
|
||||||
|
function _playSlideByIndex(relativeSlideIndex){ |
||||||
|
var _currentRoundNo = Math.floor(_currentSlideIndex / _noOfSlides); |
||||||
|
_targetSlideIndex = _currentRoundNo *_noOfSlides + relativeSlideIndex; |
||||||
|
_animations.run(_settings.animation, _targetSlideIndex); |
||||||
|
_slideCarouseld(); |
||||||
|
} |
||||||
|
|
||||||
|
function _getPreviousSlide(){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass).eq((_currentSlideIndex-1) % _noOfSlides); |
||||||
|
} |
||||||
|
function _getCurrentSlide(){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass).eq(_currentSlideIndex % _noOfSlides); |
||||||
|
} |
||||||
|
function _getNextSlide(){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass).eq((_currentSlideIndex+1) % _noOfSlides); |
||||||
|
} |
||||||
|
function _getSlideByIndex(idx){ |
||||||
|
return _jR3DCarouselDiv.find('.'+_settings.slideClass+'[data-index='+idx+']'); |
||||||
|
} |
||||||
|
|
||||||
|
function Animations(){ |
||||||
|
this.animations = { |
||||||
|
slide : _slide, |
||||||
|
slide3D : _slide3D, |
||||||
|
scroll: _scroll, |
||||||
|
scroll3D: _scroll3D, |
||||||
|
fade: _fade |
||||||
|
} |
||||||
|
} |
||||||
|
Animations.prototype.run = function run(animation, targetSlideIndex){ |
||||||
|
this.animations[animation](targetSlideIndex); |
||||||
|
} |
||||||
|
|
||||||
|
function _slide(targetSlideIndex){ |
||||||
|
_container.css({ perspective: '', overflow: 'hidden' }); |
||||||
|
_rotationAngle = _baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _slide3D(targetSlideIndex){ |
||||||
|
_container.css({ perspective: _perspective, overflow: 'visible' }); |
||||||
|
_rotationAngle = _baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _scroll(targetSlideIndex){ |
||||||
|
_container.css({ perspective: '', overflow: 'hidden' }); |
||||||
|
_rotationAngle=_baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateX('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _scroll3D(targetSlideIndex){ |
||||||
|
_container.css({ perspective: _perspective, overflow: 'visible' }); |
||||||
|
_rotationAngle=_baseAngle * targetSlideIndex; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateX('+-_rotationAngle+'deg)' }); |
||||||
|
} |
||||||
|
|
||||||
|
function _fade(targetSlideIndex){ |
||||||
|
_jR3DCarouselDiv.css({ transition: 'opacity '+ _settings.animationDuration+'ms '+_settings.animationCurve, opacity: 0}); |
||||||
|
_rotationAngle = _baseAngle * targetSlideIndex;
|
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)'}); |
||||||
|
_jR3DCarouselDiv.css({ opacity: 1 }); |
||||||
|
} |
||||||
|
|
||||||
|
function _slideCarouseld(){ |
||||||
|
_container.find('.nav').css({ backgroundColor: 'rgba(255, 255, 255, 0.77)' }) |
||||||
|
.eq(_targetSlideIndex % _noOfSlides).css({ backgroundColor: 'rgba(0, 0, 0, 0.77)' }); |
||||||
|
|
||||||
|
_currentSlideIndex = Math.round(_rotationAngle/_baseAngle); |
||||||
|
//console.log("_currentSlideIndex " +_currentSlideIndex)
|
||||||
|
_settings.onSlideShow.call(this, _getCurrentSlide()); |
||||||
|
} |
||||||
|
|
||||||
|
function _maintainResposive(){ |
||||||
|
_container.width('100%'); |
||||||
|
_jR3DCarouselDiv.hide(); |
||||||
|
_width = _container.width() < _settings.width ? _container.width() : _settings.width; |
||||||
|
_height = _width/_aspectRatio; |
||||||
|
_container.css({width: _width+'px', height: _height+'px' }); |
||||||
|
|
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_translateZ = (_height/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_height/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_translateZ = (_width/2) / Math.tan(Math.PI/_noOfSlides); |
||||||
|
_perspective = (_width/2) * Math.tan(2*Math.PI/_noOfSlides)+'px'; |
||||||
|
} |
||||||
|
_container.find('.'+_settings.slideClass).each(function(i){ |
||||||
|
var slide = $(this); |
||||||
|
if(_settings.animation.indexOf('slide')!=-1){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation.indexOf('scroll')!=-1){ |
||||||
|
_transform = 'rotateX('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
}else if(_settings.animation == 'fade'){ |
||||||
|
_transform = 'rotateY('+_baseAngle*i+'deg) translateZ('+_translateZ+'px)'; |
||||||
|
} |
||||||
|
slide.css({ transform: _transform }); |
||||||
|
}); |
||||||
|
_perspective = _settings.perspective || _perspective; |
||||||
|
_jR3DCarouselDiv.css({ transform: 'translateZ('+-_translateZ+'px) rotateY('+-_rotationAngle+'deg)' }); |
||||||
|
_jR3DCarouselDiv.show(); |
||||||
|
_container.css({ perspective: _perspective }); |
||||||
|
}
|
||||||
|
|
||||||
|
function _swipedetect(el, handleswipe){ |
||||||
|
var touchsurface = el, swipedir, startX, startY, distX, distY, |
||||||
|
threshold = 20, //required min distance traveled to be considered swipe
|
||||||
|
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
|
||||||
|
allowedTime = 700, // maximum time allowed to travel that distance
|
||||||
|
elapsedTime, startTime |
||||||
|
|
||||||
|
touchsurface.on('touchstart', function(e){ |
||||||
|
var touchobj = e.originalEvent.changedTouches[0] |
||||||
|
swipedir = 'none' |
||||||
|
startX = touchobj.pageX |
||||||
|
startY = touchobj.pageY |
||||||
|
startTime = new Date().getTime() // record time when finger first makes contact with surface
|
||||||
|
//e.preventDefault()
|
||||||
|
}) |
||||||
|
.on('touchmove', function(e){ |
||||||
|
e.preventDefault() // prevent scrolling when inside DIV
|
||||||
|
}) |
||||||
|
.on('touchend', function(e){ |
||||||
|
var touchobj = e.originalEvent.changedTouches[0] |
||||||
|
distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
|
||||||
|
distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
|
||||||
|
elapsedTime = new Date().getTime() - startTime // get time elapsed
|
||||||
|
if (elapsedTime <= allowedTime){ // first condition for awipe met
|
||||||
|
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
|
||||||
|
swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
|
||||||
|
} |
||||||
|
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
|
||||||
|
swipedir = (distY < 0)? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
|
||||||
|
} |
||||||
|
} |
||||||
|
handleswipe(swipedir) |
||||||
|
//e.preventDefault()
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/* public API */
|
||||||
|
this.showSlide = function(index){ |
||||||
|
var relativeSlideIndex = index % _noOfSlides; |
||||||
|
_playSlideByIndex(relativeSlideIndex); |
||||||
|
} |
||||||
|
this.getCurrentSlide = function(){ |
||||||
|
return _getCurrentSlide(); |
||||||
|
} |
||||||
|
this.getSlideByIndex = function(index){ |
||||||
|
return _getSlideByIndex(index); |
||||||
|
} |
||||||
|
this.showPreviousSlide = function(){ |
||||||
|
_previousButton.click(); |
||||||
|
} |
||||||
|
this.showNextSlide = function(){ |
||||||
|
_nextButton.click(); |
||||||
|
} |
||||||
|
this.playCarousel = function(){ |
||||||
|
_playjR3DCarousel(); |
||||||
|
} |
||||||
|
this.pauseCarousel = function(){ |
||||||
|
_pausejR3DCarousel(); |
||||||
|
} |
||||||
|
|
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
Loading…
Reference in new issue