第一次用写一个3d轮播

2016-07-11gallery 3d

html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d轮播</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

css部分

　　/**

* jquery.gallery.js

(function( $, undefined ) {

* Gallery object.

$.Gallery = function( options, element ) {

this.$el= $( element );

this._init( options );

};

$.Gallery.defaults = {

current: 0,// index of current item

autoplay: false,// slideshow on / off

interval: 2000 // time between transitions

};

$.Gallery.prototype = {

_init : function( options ) {

this.options = $.extend( true, {}, $.Gallery.defaults, options );

// support for 3d / 2d transforms and transitions

this.support3d= Modernizr.csstransforms3d;

this.support2d= Modernizr.csstransforms;

this.supportTrans= Modernizr.csstransitions;

this.$wrapper= this.$el.find('.dg-wrapper');

this.$items= this.$wrapper.children();

this.itemsCount= this.$items.length;

this.$nav= this.$el.find('nav');

this.$navPrev= this.$nav.find('.dg-prev');

this.$navNext= this.$nav.find('.dg-next');

// minimum of 3 items

if( this.itemsCount < 3 ) {

this.$nav.remove();

return false;

}

this.current= this.options.current;

this.isAnim= false;

this.$items.css({

'opacity': 0,

'visibility': 'hidden'

});

this._validate();

this._layout();

// load the events

this._loadEvents();

// slideshow

if( this.options.autoplay ) {

this._startSlideshow();

}

_validate: function() {

if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {

this.current = 0;

}

_layout: function() {

// current, left and right items

this._setItems();

// current item is not changed

// left and right one are rotated and translated

var leftCSS, rightCSS, currentCSS;

if( this.support3d && this.supportTrans ) {

leftCSS = {

'-webkit-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-moz-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-o-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-ms-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)'

};

rightCSS= {

'-webkit-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-moz-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-o-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-ms-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)'

};

leftCSS.opacity= 1;

leftCSS.visibility= 'visible';

rightCSS.opacity= 1;

rightCSS.visibility= 'visible';

}

else if( this.support2d && this.supportTrans ) {

leftCSS = {

'-webkit-transform': 'translate(-350px) scale(0.8)',

'-moz-transform': 'translate(-350px) scale(0.8)',

'-o-transform': 'translate(-350px) scale(0.8)',

'-ms-transform': 'translate(-350px) scale(0.8)',

'transform': 'translate(-350px) scale(0.8)'

};

rightCSS= {

'-webkit-transform': 'translate(350px) scale(0.8)',

'-moz-transform': 'translate(350px) scale(0.8)',

'-o-transform': 'translate(350px) scale(0.8)',

'-ms-transform': 'translate(350px) scale(0.8)',

'transform': 'translate(350px) scale(0.8)'

};

currentCSS= {

'z-index': 999

};

leftCSS.opacity= 1;

leftCSS.visibility= 'visible';

rightCSS.opacity= 1;

rightCSS.visibility= 'visible';

}

this.$leftItm.css( leftCSS || {} );

this.$rightItm.css( rightCSS || {} );

this.$currentItm.css( currentCSS || {} ).css({

'opacity': 1,

'visibility': 'visible'

}).addClass('dg-center');

_setItems: function() {

this.$items.removeClass('dg-center');

this.$currentItm= this.$items.eq( this.current );

this.$leftItm= ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );

this.$rightItm= ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );

if( !this.support3d && this.support2d && this.supportTrans ) {

this.$items.css( 'z-index', 1 );

this.$currentItm.css( 'z-index', 999 );

}

// next & previous items

if( this.itemsCount > 3 ) {

// next item

this.$nextItm= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();

this.$nextItm.css( this._getCoordinates('outright') );

// previous item

this.$prevItm= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();

this.$prevItm.css( this._getCoordinates('outleft') );

}

_loadEvents: function() {

var _self= this;

this.$navPrev.on( 'click.gallery', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );

_self.options.autoplay= false;

}

_self._navigate('prev');

return false;

});

this.$navNext.on( 'click.gallery', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );

_self.options.autoplay= false;

}

_self._navigate('next');

return false;

});

this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {

_self.$currentItm.addClass('dg-center');

_self.$items.removeClass('dg-transition');

_self.isAnim= false;

});

_getCoordinates: function( position ) {

if( this.support3d && this.supportTrans ) {

switch( position ) {

case 'outleft':

return {

'-webkit-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'-moz-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'-o-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'-ms-transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'transform': 'translateX(-450px) translateZ(-300px) rotateY(45deg)',

'opacity': 0,

'visibility': 'hidden'

};

break;

case 'outright':

return {

'-webkit-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'-moz-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'-o-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'-ms-transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'transform': 'translateX(450px) translateZ(-300px) rotateY(-45deg)',

'opacity': 0,

'visibility': 'hidden'

};

break;

case 'left':

return {

'-webkit-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-moz-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-o-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'-ms-transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'transform': 'translateX(-350px) translateZ(-200px) rotateY(45deg)',

'opacity': 1,

'visibility': 'visible'

};

break;

case 'right':

return {

'-webkit-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-moz-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-o-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'-ms-transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'transform': 'translateX(350px) translateZ(-200px) rotateY(-45deg)',

'opacity': 1,

'visibility': 'visible'

};

break;

case 'center':

return {

'-webkit-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',

'-moz-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',

'-o-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',

'-ms-transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',

'transform': 'translateX(0px) translateZ(0px) rotateY(0deg)',

'opacity': 1,

'visibility': 'visible'

};

break;

};

}

else if( this.support2d && this.supportTrans ) {

switch( position ) {

case 'outleft':

return {

'-webkit-transform': 'translate(-450px) scale(0.7)',

'-moz-transform': 'translate(-450px) scale(0.7)',

'-o-transform': 'translate(-450px) scale(0.7)',

'-ms-transform': 'translate(-450px) scale(0.7)',

'transform': 'translate(-450px) scale(0.7)',

'opacity': 0,

'visibility': 'hidden'

};

break;

case 'outright':

return {

'-webkit-transform': 'translate(450px) scale(0.7)',

'-moz-transform': 'translate(450px) scale(0.7)',

'-o-transform': 'translate(450px) scale(0.7)',

'-ms-transform': 'translate(450px) scale(0.7)',

'transform': 'translate(450px) scale(0.7)',

'opacity': 0,

'visibility': 'hidden'

};

break;

case 'left':

return {

'-webkit-transform': 'translate(-350px) scale(0.8)',

'-moz-transform': 'translate(-350px) scale(0.8)',

'-o-transform': 'translate(-350px) scale(0.8)',

'-ms-transform': 'translate(-350px) scale(0.8)',

'transform': 'translate(-350px) scale(0.8)',

'opacity': 1,

'visibility': 'visible'

};

break;

case 'right':

return {

'-webkit-transform': 'translate(350px) scale(0.8)',

'-moz-transform': 'translate(350px) scale(0.8)',

'-o-transform': 'translate(350px) scale(0.8)',

'-ms-transform': 'translate(350px) scale(0.8)',

'transform': 'translate(350px) scale(0.8)',

'opacity': 1,

'visibility': 'visible'

};

break;

case 'center':

return {

'-webkit-transform': 'translate(0px) scale(1)',

'-moz-transform': 'translate(0px) scale(1)',

'-o-transform': 'translate(0px) scale(1)',

'-ms-transform': 'translate(0px) scale(1)',

'transform': 'translate(0px) scale(1)',

'opacity': 1,

'visibility': 'visible'

};

break;

};

}

else {

switch( position ) {

case 'outleft':

case 'outright':

case 'left':

case 'right':

return {

'opacity': 0,

'visibility': 'hidden'

};

break;

case 'center':

return {

'opacity': 1,

'visibility': 'visible'

};

break;

};

}

_navigate: function( dir ) {

if( this.supportTrans && this.isAnim )

return false;

this.isAnim= true;

switch( dir ) {

case 'next' :

this.current= this.$rightItm.index();

// current item moves left

this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );

// right item moves to the center

this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') );

// next item moves to the right

if( this.$nextItm ) {

// left item moves out

this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );

this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );

}

else {

// left item moves right

this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );

}

break;

case 'prev' :

this.current= this.$leftItm.index();

// current item moves right

this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );

// left item moves to the center

this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );

// prev item moves to the left

if( this.$prevItm ) {

// right item moves out

this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );

this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );

}

else {

// right item moves left

this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );

}

break;

};

this._setItems();

if( !this.supportTrans )

this.$currentItm.addClass('dg-center');

_startSlideshow: function() {

var _self= this;

this.slideshow= setTimeout( function() {

_self._navigate( 'next' );

if( _self.options.autoplay ) {

_self._startSlideshow();

}

}, this.options.interval );

destroy: function() {

this.$navPrev.off('.gallery');

this.$navNext.off('.gallery');

this.$wrapper.off('.gallery');

}

};

var logError = function( message ) {

if ( this.console ) {

console.error( message );

}

};

$.fn.gallery= function( options ) {

if ( typeof options === 'string' ) {

var args = Array.prototype.slice.call( arguments, 1 );

this.each(function() {

var instance = $.data( this, 'gallery' );

if ( !instance ) {

logError( "cannot call methods on gallery prior to initialization; " +

"attempted to call method '" + options + "'" );

return;

}

if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {

logError( "no such method '" + options + "' for gallery instance" );

return;

}

instance[ options ].apply( instance, args );

});

}

else {

this.each(function() {

var instance = $.data( this, 'gallery' );

if ( !instance ) {

$.data( this, 'gallery', new $.Gallery( options, this ) );

}

});

}

return this;

};

})( jQuery );

</script>

2. 3D

<!doctype html>

<head>

</head>

<style>

margin: 0;

padding: 0;

list-style: none;

color: #1a1a1a;

font-family: '微软雅黑';

}

#Index_Box{

z-index: 1;

margin: 30px auto 20px;

width: 960px;

height: auto;

position: relative;

}

#Index_Box ul{

position: relative;

width: 960px;

height: 300px;

}

#Index_Box ul li{

z-index: 0;

position: absolute;

width: 0;

height: 0;

background: #787878;

overflow: hidden;

top: 146px;

cursor: pointer;

left: 377px;

border-radius: 4px;

box-shadow: 1px 1px 12px rgba(200,200,200,1)

}

#Index_Box ul li img{

width: 100%;

background-image: url(./images/loading.gif) no-repeat center 50%;

height: 100%;

vertical-align: top;

}

#Index_Box pre{

z-index: 100;

overflow: hidden;

cursor: pointer;

position: absolute;

width: 80px;

height: 120px;

top: 80px;

display: block;

}

#Index_Box pre.prew{

left: 85px;

background: url(./images/next.png) 0px 0px;

}

#Index_Box pre.next{

right: 85px;

background: url(./images/next.png) -80px 0px;

}

</style>

<body>

<ul>

</ul>

</div>

</body>

</html>

<!--

ZoomPic.js

function ZoomPic ()

{

this.initialize.apply(this, arguments)

}

ZoomPic.prototype =

{

initialize : function (id)

{

var _this = this;

this.wrap = typeof id === "string" ? document.getElementById(id) : id;

this.oUl = this.wrap.getElementsByTagName("ul")[0];

this.aLi = this.wrap.getElementsByTagName("li");

this.prev = this.wrap.getElementsByTagName("pre")[0];

this.next = this.wrap.getElementsByTagName("pre")[1];

this.timer = null;

this.aSort = [];

this.iCenter = 2;

this._doPrev = function () {return _this.doPrev.apply(_this)};

this._doNext = function () {return _this.doNext.apply(_this)};

this.options = [

{width:476, height:210, top:40, left:0, zIndex:1},

{width:426, height:250, top:20, left:50, zIndex:2},

{width:654, height:290, top:0, left:150, zIndex:3},

{width:426, height:250, top:20, left:480, zIndex:2},

{width:476, height:210, top:40, left:476, zIndex:1},

];

for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];

this.aSort.unshift(this.aSort.pop());

this.setUp();

this.addEvent(this.prev, "click", this._doPrev);

this.addEvent(this.next, "click", this._doNext);

this.doImgClick();

this.timer = setInterval(function ()

{

_this.doNext()

}, 3000);

this.wrap.onmouseover = function ()

{

clearInterval(_this.timer)

};

this.wrap.onmouseout = function ()

{

_this.timer = setInterval(function ()

{

_this.doNext()

}, 3000);

}

doPrev : function ()

{

this.aSort.unshift(this.aSort.pop());

this.setUp()

doNext : function ()

{

this.aSort.push(this.aSort.shift());

this.setUp()

doImgClick : function ()

{

var _this = this;

for (var i = 0; i < this.aSort.length; i++)

{

this.aSort[i].onclick = function ()

{

if (this.index > _this.iCenter)

{

for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());

_this.setUp()

}

else if(this.index < _this.iCenter)

{

for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());

_this.setUp()

}

setUp : function ()

{

var _this = this;

var i = 0;

for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);

for (i = 0; i < this.aSort.length; i++)

{

this.aSort[i].index = i;

if (i < 5)

{

this.css(this.aSort[i], "display", "block");

this.doMove(this.aSort[i], this.options[i], function ()

{

_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()

{

_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()

{

_this.aSort[_this.iCenter].onmouseover = function ()

{

_this.doMove(this.getElementsByTagName("div")[0], {bottom:0})

};

_this.aSort[_this.iCenter].onmouseout = function ()

{

_this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})

}

})

});

}

else

{

this.css(this.aSort[i], "display", "none");

this.css(this.aSort[i], "width", 0);

this.css(this.aSort[i], "height", 0);

this.css(this.aSort[i], "top", 37);

this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)

}

if (i < this.iCenter || i > this.iCenter)

{

this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 100)

this.aSort[i].onmouseover = function ()

{

_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})

};

this.aSort[i].onmouseout = function ()

{

_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})

};

this.aSort[i].onmouseout();

}

else

{

this.aSort[i].onmouseover = this.aSort[i].onmouseout = null

}

addEvent : function (oElement, sEventType, fnHandler)

{

return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)

css : function (oElement, attr, value)

{

if (arguments.length == 2)

{

return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]

}

else if (arguments.length == 3)

{

switch (attr)

{

case "width":

case "height":

case "top":

case "left":

case "bottom":

oElement.style[attr] = value + "px";

break;

case "opacity" :

oElement.style.filter = "alpha(opacity=" + value + ")";

oElement.style.opacity = value / 100;

break;

default :

oElement.style[attr] = value;

break

}

doMove : function (oElement, oAttr, fnCallBack)

{

var _this = this;

clearInterval(oElement.timer);

oElement.timer = setInterval(function ()

{

var bStop = true;

for (var property in oAttr)

{

var iCur = parseFloat(_this.css(oElement, property));

property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));

var iSpeed = (oAttr[property] - iCur) / 5;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur != oAttr[property])

{

bStop = false;

_this.css(oElement, property, iCur + iSpeed)

}

if (bStop)

{

clearInterval(oElement.timer);

fnCallBack && fnCallBack.apply(_this, arguments)

}

}, 30)

}

};

window.onload = function ()

{

new ZoomPic("Index_Box");

};

-->

3 华谊兄弟3d

/* ImageFlow constructor */

function ImageFlow() {

    /* Setting option defaults */

    this.defaults =

	{

	    animationSpeed: 50,             /* Animation speed in ms */

	    aspectRatio: 2.3,          /* Aspect ratio of the ImageFlow container (width divided by height) */

	    buttons: false,          /* Toggle navigation buttons */

	    captions: true,           /* Toggle captions */

	    circular: true,          /* Toggle circular rotation */

	    imageCursor: 'pointer',      /* Cursor type for all images - default is 'default' */

	    ImageFlowID: 'imageflow',    /* Default id of the ImageFlow container */

	    imageFocusM: 1.0,            /* Multiplicator for the focussed image size in percent */

	    imageFocusMax: 3,              /* 左右二侧图片数量 */

	    imagePath: '',             /* Path to the images relative to the reflect_.php script */

	    imageScaling: true,           /* Toggle image scaling */

	    imagesHeight: 0.65,           /* 高宽比例 */

	    imagesM: 1.2,            /* 图片深度 */

	    onClick: function () { document.location = this.url; },   /* Onclick behaviour */

	    opacity: false,          /* Toggle image opacity */

	    opacityArray: [10, 8, 6, 4, 2],   /* Image opacity (range: 0 to 10) first value is for the focussed image */

	    percentLandscape: 118,            /* Scale landscape format */

	    percentOther: 120,            /* Scale portrait and square format */

	    preloadImages: true,           /* Toggles loading bar (false: requires img attributes height and width) */

	    reflections: true,           /* Toggle reflections */

	    reflectionGET: '',             /* Pass variables via the GET method to the reflect_.php script */

	    reflectionP: 0.5,            /* Height of the reflection in percent of the source image */

	    reflectionPNG: false,          /* Toggle reflect2.php or reflect3.php */

	    reflectPath: '',             /* Path to the reflect_.php script */

	    scrollbarP: 0.6,            /* Width of the scrollbar in percent */

	    slider: true,           /* Toggle slider */

	    sliderCursor: 'e-resize',     /* Slider cursor type - default is 'default' */

	    sliderWidth: 14,             /* Width of the slider in px */

	    slideshow: true,          /* Toggle slideshow */

	    slideshowSpeed: 1000,           /* 轮播时间 */

	    slideshowAutoplay: true,          /* Toggle automatic slideshow play on startup */

	    startID: 1,              /* Image ID to begin with */

	    glideToStartID: true,           /* Toggle glide animation to start ID */

	    startAnimation: false,          /* Animate images moving in from the right on startup */

	    xStep: 90             /* Step width on the x-axis in px */

	};

    /* Closure for this */

    var my = this;

    /* Initiate ImageFlow */

    this.init = function (options) {

        /* Evaluate options */

        for (var name in my.defaults) {

            this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : my.defaults[name];

        }

        /* Try to get ImageFlow div element */

        var ImageFlowDiv = document.getElementById(my.ImageFlowID);

        if (ImageFlowDiv) {

            /* Set it global within the ImageFlow scope */

            ImageFlowDiv.style.visibility = 'visible';

            this.ImageFlowDiv = ImageFlowDiv;

            /* Try to create XHTML structure */

            if (this.createStructure()) {

                this.imagesDiv = document.getElementById(my.ImageFlowID + '_images');

                this.captionDiv = document.getElementById(my.ImageFlowID + '_caption');

                this.navigationDiv = document.getElementById(my.ImageFlowID + '_navigation');

                this.scrollbarDiv = document.getElementById(my.ImageFlowID + '_scrollbar');

                this.sliderDiv = document.getElementById(my.ImageFlowID + '_slider');

                this.buttonNextDiv = document.getElementById(my.ImageFlowID + '_next');

                this.buttonPreviousDiv = document.getElementById(my.ImageFlowID + '_previous');

                this.buttonSlideshow = document.getElementById(my.ImageFlowID + '_slideshow');

                this.indexArray = [];

                this.current = 0;

                this.imageID = 0;

                this.target = 0;

                this.memTarget = 0;

                this.firstRefresh = true;

                this.firstCheck = true;

                this.busy = false;

                /* Set height of the ImageFlow container and center the loading bar */

                var width = this.ImageFlowDiv.offsetWidth;

                var height = Math.round(width / my.aspectRatio);

                document.getElementById(my.ImageFlowID + '_loading_txt').style.paddingTop = ((height * 0.5) - 22) + 'px';

                ImageFlowDiv.style.height = height + 'px';

                /* Init loading progress */

                this.loadingProgress();

            }

        }

    };

    /* Create HTML Structure */

    this.createStructure = function () {

        /* Create images div container */

        var imagesDiv = my.Helper.createDocumentElement('div', 'images');

        /* Shift all images into the images div */

        var node, version, src, imageNode;

        var max = my.ImageFlowDiv.childNodes.length;

        for (var index = 0; index < max; index++) {

            node = my.ImageFlowDiv.childNodes[index];

            if (node && node.nodeType == 1 && node.nodeName == 'IMG') {

                /* Add 'reflect.php?img=' */

                if (my.reflections === true) {

                    version = (my.reflectionPNG) ? '3' : '2';

                    src = my.imagePath + node.getAttribute('src', 2);

                    //src = my.reflectPath+'reflect'+version+'.php?img='+src+my.reflectionGET;

                    node.setAttribute('src', src);

                }

                /* Clone image nodes and append them to the images div */

                imageNode = node.cloneNode(true);

                imagesDiv.appendChild(imageNode);

            }

        }

        /* Clone some more images to make a circular animation possible */

        if (my.circular) {

            /* Create temporary elements to hold the cloned images */

            var first = my.Helper.createDocumentElement('div', 'images');

            var last = my.Helper.createDocumentElement('div', 'images');

            /* Make sure, that there are enough images to use circular mode */

            max = imagesDiv.childNodes.length;

            if (max < my.imageFocusMax) {

                my.imageFocusMax = max;

            }

            /* Do not clone anything if there is only one image */

            if (max > 1) {

                /* Clone the first and last images */

                var i;

                for (i = 0; i < max; i++) {

                    /* Number of clones on each side equals the imageFocusMax */

                    node = imagesDiv.childNodes[i];

                    if (i < my.imageFocusMax) {

                        imageNode = node.cloneNode(true);

                        first.appendChild(imageNode);

                    }

                    if (max - i < my.imageFocusMax + 1) {

                        imageNode = node.cloneNode(true);

                        last.appendChild(imageNode);

                    }

                }

                /* Sort the image nodes in the following order: last | originals | first */

                for (i = 0; i < max; i++) {

                    node = imagesDiv.childNodes[i];

                    imageNode = node.cloneNode(true);

                    last.appendChild(imageNode);

                }

                for (i = 0; i < my.imageFocusMax; i++) {

                    node = first.childNodes[i];

                    imageNode = node.cloneNode(true);

                    last.appendChild(imageNode);

                }

                /* Overwrite the imagesDiv with the new order */

                imagesDiv = last;

            }

        }

        /* Create slideshow button div and append it to the images div */

        if (my.slideshow) {

            var slideshowButton = my.Helper.createDocumentElement('div', 'slideshow');

            imagesDiv.appendChild(slideshowButton);

        }

        /* Create loading text container */

        var loadingP = my.Helper.createDocumentElement('p', 'loading_txt');

        var loadingText = document.createTextNode(' ');

        loadingP.appendChild(loadingText);

        /* Create loading div container */

        var loadingDiv = my.Helper.createDocumentElement('div', 'loading');

        /* Create loading bar div container inside the loading div */

        var loadingBarDiv = my.Helper.createDocumentElement('div', 'loading_bar');

        loadingDiv.appendChild(loadingBarDiv);

        /* Create captions div container */

        var captionDiv = my.Helper.createDocumentElement('div', 'caption');

        /* Create slider and button div container inside the scrollbar div */

        var scrollbarDiv = my.Helper.createDocumentElement('div', 'scrollbar');

        var sliderDiv = my.Helper.createDocumentElement('div', 'slider');

        scrollbarDiv.appendChild(sliderDiv);

        if (my.buttons) {

            var buttonPreviousDiv = my.Helper.createDocumentElement('div', 'previous', 'button');

            var buttonNextDiv = my.Helper.createDocumentElement('div', 'next', 'button');

            scrollbarDiv.appendChild(buttonPreviousDiv);

            scrollbarDiv.appendChild(buttonNextDiv);

        }

        /* Create navigation div container beneath images div */

        var navigationDiv = my.Helper.createDocumentElement('div', 'navigation');

        navigationDiv.appendChild(captionDiv);

        navigationDiv.appendChild(scrollbarDiv);

        /* Update document structure and return true on success */

        var success = false;

        if (my.ImageFlowDiv.appendChild(imagesDiv) &&

			my.ImageFlowDiv.appendChild(loadingP) &&

			my.ImageFlowDiv.appendChild(loadingDiv) &&

			my.ImageFlowDiv.appendChild(navigationDiv)) {

            /* Remove image nodes outside the images div */

            max = my.ImageFlowDiv.childNodes.length;

            for (index = 0; index < max; index++) {

                node = my.ImageFlowDiv.childNodes[index];

                if (node && node.nodeType == 1 && node.nodeName == 'IMG') {

                    my.ImageFlowDiv.removeChild(node);

                }

            }

            success = true;

        }

        return success;

    };

    /* Manage loading progress and call the refresh function */

    this.loadingProgress = function () {

        var p = my.loadingStatus();

        if ((p < 100 || my.firstCheck) && my.preloadImages) {

            /* Insert a short delay if the browser loads rapidly from its cache */

            if (my.firstCheck && p == 100) {

                my.firstCheck = false;

                window.setTimeout(my.loadingProgress, 100);

            }

            else {

                window.setTimeout(my.loadingProgress, 40);

            }

        }

        else {

            /* Hide loading elements */

            document.getElementById(my.ImageFlowID + '_loading_txt').style.display = 'none';

            document.getElementById(my.ImageFlowID + '_loading').style.display = 'none';

            /* Refresh ImageFlow on window resize - delay adding this event for the IE */

            window.setTimeout(my.Helper.addResizeEvent, 1000);

            /* Call refresh once on startup to display images */

            my.refresh();

            /* Only initialize navigation elements if there is more than one image */

            if (my.max > 1) {

                /* Initialize mouse, touch and key support */

                my.MouseWheel.init();

                my.MouseDrag.init();

                my.Touch.init();

                my.Key.init();

                /* Toggle slideshow */

                if (my.slideshow) {

                    my.Slideshow.init();

                }

                /* Toggle scrollbar visibility */

                if (my.slider) {

                    my.scrollbarDiv.style.visibility = 'visible';

                }

            }

        }

    };

    /* Return loaded images in percent, set loading bar width and loading text */

    this.loadingStatus = function () {

        var max = my.imagesDiv.childNodes.length;

        var i = 0, completed = 0;

        var image = null;

        for (var index = 0; index < max; index++) {

            image = my.imagesDiv.childNodes[index];

            if (image && image.nodeType == 1 && image.nodeName == 'IMG') {

                if (image.complete) {

                    completed++;

                }

                i++;

            }

        }

        var finished = Math.round((completed / i) * 100);

        var loadingBar = document.getElementById(my.ImageFlowID + '_loading_bar');

        loadingBar.style.width = finished + '%';

        /* Do not count the cloned images */

        if (my.circular) {

            i = i - (my.imageFocusMax * 2);

            completed = (finished < 1) ? 0 : Math.round((i / 100) * finished);

        }

        var loadingP = document.getElementById(my.ImageFlowID + '_loading_txt');

        var loadingTxt = document.createTextNode('正在加载,请稍候 ' + completed + '/' + i);

        loadingP.replaceChild(loadingTxt, loadingP.firstChild);

        return finished;

    };

    /* Cache EVERYTHING that only changes on refresh or resize of the window */

    this.refresh = function () {

        /* Cache global variables */

        this.imagesDivWidth = my.imagesDiv.offsetWidth + my.imagesDiv.offsetLeft;

        this.maxHeight = Math.round(my.imagesDivWidth / my.aspectRatio);

        this.maxFocus = my.imageFocusMax * my.xStep;

        this.size = my.imagesDivWidth * 0.5;

        this.sliderWidth = my.sliderWidth * 0.5;

        this.scrollbarWidth = (my.imagesDivWidth - (Math.round(my.sliderWidth) * 2)) * my.scrollbarP;

        this.imagesDivHeight = Math.round(my.maxHeight * my.imagesHeight);

        /* Change imageflow div properties */

        my.ImageFlowDiv.style.height = my.maxHeight + 'px';

        /* Change images div properties */

        my.imagesDiv.style.height = my.imagesDivHeight + 'px';

        /* Change images div properties */

        my.navigationDiv.style.height = (my.maxHeight - my.imagesDivHeight) + 'px';

        /* Change captions div properties */

        my.captionDiv.style.width = my.imagesDivWidth + 'px';

        my.captionDiv.style.paddingTop = Math.round(my.imagesDivWidth * 0.02) + 'px';

        /* Change scrollbar div properties */

        my.scrollbarDiv.style.width = my.scrollbarWidth + 'px';

        my.scrollbarDiv.style.marginTop = Math.round(my.imagesDivWidth * 0.02) + 'px';

        my.scrollbarDiv.style.marginLeft = Math.round(my.sliderWidth + ((my.imagesDivWidth - my.scrollbarWidth) / 2)) + 'px';

        /* Set slider attributes */

        my.sliderDiv.style.cursor = my.sliderCursor;

        my.sliderDiv.onmousedown = function () { my.MouseDrag.start(this); return false; };

        if (my.buttons) {

            my.buttonPreviousDiv.onclick = function () { my.MouseWheel.handle(1); };

            my.buttonNextDiv.onclick = function () { my.MouseWheel.handle(-1); };

        }

        /* Set the reflection multiplicator */

        var multi = (my.reflections === true) ? my.reflectionP + 1 : 1;

        /* Set image attributes */

        var max = my.imagesDiv.childNodes.length;

        var i = 0;

        var image = null;

        for (var index = 0; index < max; index++) {

            image = my.imagesDiv.childNodes[index];

            if (image !== null && image.nodeType == 1 && image.nodeName == 'IMG') {

                this.indexArray[i] = index;

                /* Set image attributes to store values */

                image.url = image.getAttribute('longdesc');

                image.xPosition = (-i * my.xStep);

                image.i = i;

                /* Add width and height as attributes only once */

                if (my.firstRefresh) {

                    if (image.getAttribute('width') !== null && image.getAttribute('height') !== null) {

                        image.w = image.getAttribute('width');

                        image.h = image.getAttribute('height') * multi;

                    }

                    else {

                        image.w = image.width;

                        image.h = image.height;

                    }

                }

                /* Check source image format. Get image height minus reflection height! */

                if ((image.w) > (image.h / (my.reflectionP + 1))) {

                    /* Landscape format */

                    image.pc = my.percentLandscape;

                    image.pcMem = my.percentLandscape;

                }

                else {

                    /* Portrait and square format */

                    image.pc = my.percentOther;

                    image.pcMem = my.percentOther;

                }

                /* Change image positioning */

                if (my.imageScaling === false) {

                    image.style.position = 'relative';

                    image.style.display = 'inline';

                }

                /* Set image cursor type */

                image.style.cursor = my.imageCursor;

                i++;

            }

        }

        this.max = my.indexArray.length;

        /* Override dynamic sizes based on the first image */

        if (my.imageScaling === false) {

            image = my.imagesDiv.childNodes[my.indexArray[0]];

            /* Set left padding for the first image */

            this.totalImagesWidth = image.w * my.max;

            image.style.paddingLeft = (my.imagesDivWidth / 2) + (image.w / 2) + 'px';

            /* Override images and navigation div height */

            my.imagesDiv.style.height = image.h + 'px';

            my.navigationDiv.style.height = (my.maxHeight - image.h) + 'px';

        }

        /* Handle startID on the first refresh */

        if (my.firstRefresh) {

            /* Reset variable */

            my.firstRefresh = false;

            /* Set imageID to the startID */

            my.imageID = my.startID - 1;

            if (my.imageID < 0) {

                my.imageID = 0;

            }

            /* Map image id range in cicular mode (ignore the cloned images) */

            if (my.circular) {

                my.imageID = my.imageID + my.imageFocusMax;

            }

            /* Make sure, that the id is smaller than the image count  */

            maxId = (my.circular) ? (my.max - (my.imageFocusMax)) - 1 : my.max - 1;

            if (my.imageID > maxId) {

                my.imageID = maxId;

            }

            /* Toggle glide animation to start ID */

            if (my.glideToStartID === false) {

                my.moveTo(-my.imageID * my.xStep);

            }

            /* Animate images moving in from the right */

            if (my.startAnimation) {

                my.moveTo(5000);

            }

        }

        /* Only animate if there is more than one image */

        if (my.max > 1) {

            my.glideTo(my.imageID);

        }

        /* Display images in current order */

        my.moveTo(my.current);

    };

    /* Main animation function */

    this.moveTo = function (x)

    {

        this.current = x;

        this.zIndex = my.max;

        /* Main loop */

        for (var index = 0; index < my.max; index++)

        {

            var image = my.imagesDiv.childNodes[my.indexArray[index]];

            var currentImage = index * -my.xStep;

            /* Enabled image scaling */

            if (my.imageScaling)

            {

                /* Don't display images that are not conf_focussed */

                if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)

                {

                    try

                    {

                        image.style.visibility = 'hidden';

                        image.style.display = 'none';

                    }

                    catch (e)

                    { }

                }

                else

                {

                    try

                    {

                        var z = (Math.sqrt(10000 + x * x) + 100) * my.imagesM;

                        var xs = x / z * my.size + my.size;

                        /* Still hide images until they are processed, but set display style to block */

                        image.style.display = 'block';

                        /* Process new image height and width */

                        var newImageH = (image.h / image.w * image.pc) / z * my.size;

                        var newImageW = 0;

                        switch (newImageH > my.maxHeight)

                        {

                            case false:

                                newImageW = image.pc / z * my.size;

                                break;

                            default:

                                newImageH = my.maxHeight;

                                newImageW = image.w * newImageH / image.h;

                                break;

                        }

                        var newImageTop = (my.imagesDivHeight - newImageH) + ((newImageH / (my.reflectionP + 1)) * my.reflectionP);

                        /* Set new image properties */

                        image.style.left = xs - (image.pc / 2) / z * my.size + 'px';

                        if (newImageW && newImageH)

                        {

                            image.style.height = newImageH + 'px';

                            image.style.width = newImageW + 'px';

                            image.style.top = newImageTop + 'px';

                        }

                        image.style.visibility = 'visible';

                        /* Set image layer through zIndex */

                        switch (x < 0)

                        {

                            case true:

                                this.zIndex++;

                                break;

                            default:

                                this.zIndex = my.zIndex - 1;

                                break;

                        }

                        /* Change zIndex and onclick function of the focussed image */

                        switch (image.i == my.imageID)

                        {

                            case false:

                                image.onclick = function () { my.glideTo(this.i); };

                                break;

                            default:

                                this.zIndex = my.zIndex + 1;

                                if (image.url !== '')

                                {

                                    image.onclick = my.onClick;

                                }

                                break;

                        }

                        image.style.zIndex = my.zIndex;

                    }

                    catch (e)

                    { }

                }

            }

            /* Disabled image scaling */

            else

            {

                if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)

                {

                    image.style.visibility = 'hidden';

                }

                else

                {

                    image.style.visibility = 'visible';

                    /* Change onclick function of the focussed image */

                    switch (image.i == my.imageID)

                    {

                        case false:

                            image.onclick = function () { my.glideTo(this.i); };

                            break;

                        default:

                            if (image.url !== '')

                            {

                                image.onclick = my.onClick;

                            }

                            break;

                    }

                }

                my.imagesDiv.style.marginLeft = (x - my.totalImagesWidth) + 'px';

            }

            x += my.xStep;

        }

    };

    /* Initializes image gliding animation */

    this.glideTo = function (imageID)

    {

        /* Check for jumppoints */

        var jumpTarget, clonedImageID;

        if (my.circular)

        {

            /* Trigger left jumppoint */

            if (imageID + 1 === my.imageFocusMax)

            {

                /* Set jump target to the same cloned image on the right */

                clonedImageID = my.max - my.imageFocusMax;

                jumpTarget = -clonedImageID * my.xStep;

                /* Set the imageID to the last image */

                imageID = clonedImageID - 1;

            }

            /* Trigger right jumppoint */

            if (imageID === (my.max - my.imageFocusMax))

            {

                /* Set jump target to the same cloned image on the left */

                clonedImageID = my.imageFocusMax - 1;

                jumpTarget = -clonedImageID * my.xStep;

                /* Set the imageID to the first image */

                imageID = clonedImageID + 1;

            }

        }

        /* Calculate new image position target */

        var x = -imageID * my.xStep;

        this.target = x;

        this.memTarget = x;

        this.imageID = imageID;

        /* Display new caption */

        var caption = "";

        try

        {

            caption = my.imagesDiv.childNodes[imageID].getAttribute('alt');

        }

        catch (e)

        {

        }

        if (caption === '' || my.captions === false)

        {

            caption = ' ';

        }

        my.captionDiv.innerHTML = caption;

        /* Set scrollbar slider to new position */

        if (my.MouseDrag.busy === false)

        {

            if (my.circular)

            {

                this.newSliderX = ((imageID - my.imageFocusMax) * my.scrollbarWidth) / (my.max - (my.imageFocusMax * 2) - 1) - my.MouseDrag.newX;

            }

            else

            {

                this.newSliderX = (imageID * my.scrollbarWidth) / (my.max - 1) - my.MouseDrag.newX;

            }

            my.sliderDiv.style.marginLeft = (my.newSliderX - my.sliderWidth) + 'px';

        }

        /* Only process if opacity or a multiplicator for the focussed image has been set */

        if (my.opacity === true || my.imageFocusM !== my.defaults.imageFocusM)

        {

            /* Set opacity for centered image */

            my.Helper.setOpacity(my.imagesDiv.childNodes[imageID], my.opacityArray[0]);

            my.imagesDiv.childNodes[imageID].pc = my.imagesDiv.childNodes[imageID].pc * my.imageFocusM;

            /* Set opacity for the other images that are displayed */

            var opacityValue = 0;

            var rightID = 0;

            var leftID = 0;

            var last = my.opacityArray.length;

            for (var i = 1; i < (my.imageFocusMax + 1); i++)

            {

                if ((i + 1) > last)

                {

                    opacityValue = my.opacityArray[last - 1];

                }

                else

                {

                    opacityValue = my.opacityArray[i];

                }

                rightID = imageID + i;

                leftID = imageID - i;

                if (rightID < my.max)

                {

                    my.Helper.setOpacity(my.imagesDiv.childNodes[rightID], opacityValue);

                    my.imagesDiv.childNodes[rightID].pc = my.imagesDiv.childNodes[rightID].pcMem;

                }

                if (leftID >= 0)

                {

                    my.Helper.setOpacity(my.imagesDiv.childNodes[leftID], opacityValue);

                    my.imagesDiv.childNodes[leftID].pc = my.imagesDiv.childNodes[leftID].pcMem;

                }

            }

        }

        /* Move the images to the jump target */

        if (jumpTarget)

        {

            my.moveTo(jumpTarget);

        }

        /* Animate gliding to new x position */

        if (my.busy === false)

        {

            my.busy = true;

            my.animate();

        }

    };

    /* Animates image gliding */

    this.animate = function () {

        switch (my.target < my.current - 1 || my.target > my.current + 1) {

            case true:

                my.moveTo(my.current + (my.target - my.current) / 3);

                window.setTimeout(my.animate, my.animationSpeed);

                my.busy = true;

                break;

            default:

                my.busy = false;

                break;

        }

    };

    /* Used by user events to call the glideTo function */

    this.glideOnEvent = function (imageID) {

        /* Interrupt slideshow on mouse wheel, keypress, touch and mouse drag */

        if (my.slideshow) {

            my.Slideshow.interrupt();

        }

        /* Glide to new imageID */

        my.glideTo(imageID);

    };

    /* Slideshow function */

    this.Slideshow =

	{

	    direction: 1,

	    init: function () {

	        /* Call start() if autoplay is enabled, stop() if it is disabled */

	        (my.slideshowAutoplay) ? my.Slideshow.start() : my.Slideshow.stop();

	    },

	    interrupt: function () {

	        /* Remove interrupt event */

	        my.Helper.removeEvent(my.ImageFlowDiv, 'click', my.Slideshow.interrupt);

	        /* Interrupt the slideshow */

	        my.Slideshow.stop();

	    },

	    addInterruptEvent: function () {

	        /* A click anywhere inside the ImageFlow div interrupts the slideshow */

	        my.Helper.addEvent(my.ImageFlowDiv, 'click', my.Slideshow.interrupt);

	    },

	    start: function () {

	        /* Set button style to pause */

	        my.Helper.setClassName(my.buttonSlideshow, 'slideshow pause');

	        /* Set onclick behaviour to stop */

	        my.buttonSlideshow.onclick = function () { my.Slideshow.stop(); };

	        /* Set slide interval */

	        my.Slideshow.action = window.setInterval(my.Slideshow.slide, my.slideshowSpeed);

	        /* Allow the user to always interrupt the slideshow */

	        window.setTimeout(my.Slideshow.addInterruptEvent, 100);

	    },

	    stop: function () {

	        /* Set button style to play */

	        my.Helper.setClassName(my.buttonSlideshow, 'slideshow play');

	        /* Set onclick behaviour to start */

	        my.buttonSlideshow.onclick = function () { my.Slideshow.start(); };

	        /* Clear slide interval */

	        window.clearInterval(my.Slideshow.action);

	    },

	    slide: function () {

	        var newImageID = my.imageID + my.Slideshow.direction;

	        var reverseDirection = false;

	        /* Reverse direction at the last image on the right */

	        if (newImageID === my.max) {

	            my.Slideshow.direction = -1;

	            reverseDirection = true;

	        }

	        /* Reverse direction at the last image on the left */

	        if (newImageID < 0) {

	            my.Slideshow.direction = 1;

	            reverseDirection = true;

	        }

	        /* If direction is reversed recall this method, else call the glideTo method */

	        (reverseDirection) ? my.Slideshow.slide() : my.glideTo(newImageID);

	    }

	};

    /* Mouse Wheel support */

    this.MouseWheel =

	{

	    init: function () {

	        /* Init mouse wheel listener */

	        if (window.addEventListener) {

	            my.ImageFlowDiv.addEventListener('DOMMouseScroll', my.MouseWheel.get, false);

	        }

	        my.Helper.addEvent(my.ImageFlowDiv, 'mousewheel', my.MouseWheel.get);

	    },

	    get: function (event) {

	        var delta = 0;

	        if (!event) {

	            event = window.event;

	        }

	        if (event.wheelDelta) {

	            delta = event.wheelDelta / 120;

	        }

	        else if (event.detail) {

	            delta = -event.detail / 3;

	        }

	        if (delta) {

	            my.MouseWheel.handle(delta);

	        }

	        my.Helper.suppressBrowserDefault(event);

	    },

	    handle: function (delta) {

	        var change = false;

	        var newImageID = 0;

	        if (delta > 0) {

	            if (my.imageID >= 1) {

	                newImageID = my.imageID - 1;

	                change = true;

	            }

	        }

	        else {

	            if (my.imageID < (my.max - 1)) {

	                newImageID = my.imageID + 1;

	                change = true;

	            }

	        }

	        /* Glide to next (mouse wheel down) / previous (mouse wheel up) image  */

	        if (change) {

	            my.glideOnEvent(newImageID);

	        }

	    }

	};

    /* Mouse Dragging */

    this.MouseDrag =

	{

	    object: null,

	    objectX: 0,

	    mouseX: 0,

	    newX: 0,

	    busy: false,

	    /* Init mouse event listener */

	    init: function () {

	        my.Helper.addEvent(my.ImageFlowDiv, 'mousemove', my.MouseDrag.drag);

	        my.Helper.addEvent(my.ImageFlowDiv, 'mouseup', my.MouseDrag.stop);

	        my.Helper.addEvent(document, 'mouseup', my.MouseDrag.stop);

	        /* Avoid text and image selection while dragging  */

	        my.ImageFlowDiv.onselectstart = function () {

	            var selection = true;

	            if (my.MouseDrag.busy) {

	                selection = false;

	            }

	            return selection;

	        };

	    },

	    start: function (o) {

	        my.MouseDrag.object = o;

	        my.MouseDrag.objectX = my.MouseDrag.mouseX - o.offsetLeft + my.newSliderX;

	    },

	    stop: function () {

	        my.MouseDrag.object = null;

	        my.MouseDrag.busy = false;

	    },

	    drag: function (e) {

	        var posx = 0;

	        if (!e) {

	            e = window.event;

	        }

	        if (e.pageX) {

	            posx = e.pageX;

	        }

	        else if (e.clientX) {

	            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

	        }

	        my.MouseDrag.mouseX = posx;

	        if (my.MouseDrag.object !== null) {

	            var newX = (my.MouseDrag.mouseX - my.MouseDrag.objectX) + my.sliderWidth;

	            /* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */

	            if (newX < (-my.newSliderX)) {

	                newX = -my.newSliderX;

	            }

	            if (newX > (my.scrollbarWidth - my.newSliderX)) {

	                newX = my.scrollbarWidth - my.newSliderX;

	            }

	            /* Set new slider position */

	            var step, imageID;

	            if (my.circular) {

	                step = (newX + my.newSliderX) / (my.scrollbarWidth / (my.max - (my.imageFocusMax * 2) - 1));

	                imageID = Math.round(step) + my.imageFocusMax;

	            }

	            else {

	                step = (newX + my.newSliderX) / (my.scrollbarWidth / (my.max - 1));

	                imageID = Math.round(step);

	            }

	            my.MouseDrag.newX = newX;

	            my.MouseDrag.object.style.left = newX + 'px';

	            if (my.imageID !== imageID) {

	                my.glideOnEvent(imageID);

	            }

	            my.MouseDrag.busy = true;

	        }

	    }

	};

    /* Safari touch events on the iPhone and iPod Touch */

    this.Touch =

	{

	    x: 0,

	    startX: 0,

	    stopX: 0,

	    busy: false,

	    first: true,

	    /* Init touch event listener */

	    init: function () {

	        my.Helper.addEvent(my.navigationDiv, 'touchstart', my.Touch.start);

	        my.Helper.addEvent(document, 'touchmove', my.Touch.handle);

	        my.Helper.addEvent(document, 'touchend', my.Touch.stop);

	    },

	    isOnNavigationDiv: function (e) {

	        var state = false;

	        if (e.touches) {

	            var target = e.touches[0].target;

	            if (target === my.navigationDiv || target === my.sliderDiv || target === my.scrollbarDiv) {

	                state = true;

	            }

	        }

	        return state;

	    },

	    getX: function (e) {

	        var x = 0;

	        if (e.touches) {

	            x = e.touches[0].pageX;

	        }

	        return x;

	    },

	    start: function (e) {

	        my.Touch.startX = my.Touch.getX(e);

	        my.Touch.busy = true;

	        my.Helper.suppressBrowserDefault(e);

	    },

	    isBusy: function () {

	        var busy = false;

	        if (my.Touch.busy) {

	            busy = true;

	        }

	        return busy;

	    },

	    /* Handle touch event position within the navigation div */

	    handle: function (e) {

	        if (my.Touch.isBusy && my.Touch.isOnNavigationDiv(e)) {

	            var max = (my.circular) ? (my.max - (my.imageFocusMax * 2) - 1) : (my.max - 1);

	            if (my.Touch.first) {

	                my.Touch.stopX = (max - my.imageID) * (my.imagesDivWidth / max);

	                my.Touch.first = false;

	            }

	            var newX = -(my.Touch.getX(e) - my.Touch.startX - my.Touch.stopX);

	            /* Map x-axis touch coordinates in range of the ImageFlow width */

	            if (newX < 0) {

	                newX = 0;

	            }

	            if (newX > my.imagesDivWidth) {

	                newX = my.imagesDivWidth;

	            }

	            my.Touch.x = newX;

	            var imageID = Math.round(newX / (my.imagesDivWidth / max));

	            imageID = max - imageID;

	            if (my.imageID !== imageID) {

	                if (my.circular) {

	                    imageID = imageID + my.imageFocusMax;

	                }

	                my.glideOnEvent(imageID);

	            }

	            my.Helper.suppressBrowserDefault(e);

	        }

	    },

	    stop: function () {

	        my.Touch.stopX = my.Touch.x;

	        my.Touch.busy = false;

	    }

	};

    /* Key support */

    this.Key =

	{

	    /* Init key event listener */

	    init: function () {

	        document.onkeydown = function (event) { my.Key.handle(event); };

	    },

	    /* Handle the arrow keys */

	    handle: function (event) {

	        var charCode = my.Key.get(event);

	        switch (charCode) {

	            /* Right arrow key */

	            case 39:

	                my.MouseWheel.handle(-1);

	                break;

	            /* Left arrow key */

	            case 37:

	                my.MouseWheel.handle(1);

	                break;

	        }

	    },

	    /* Get the current keycode */

	    get: function (event) {

	        event = event || window.event;

	        return event.keyCode;

	    }

	};

    /* Helper functions */

    this.Helper =

	{

	    /* Add events */

	    addEvent: function (obj, type, fn) {

	        if (obj.addEventListener) {

	            obj.addEventListener(type, fn, false);

	        }

	        else if (obj.attachEvent) {

	            obj["e" + type + fn] = fn;

	            obj[type + fn] = function () { obj["e" + type + fn](window.event); };

	            obj.attachEvent("on" + type, obj[type + fn]);

	        }

	    },

	    /* Remove events */

	    removeEvent: function (obj, type, fn) {

	        if (obj.removeEventListener) {

	            obj.removeEventListener(type, fn, false);

	        }

	        else if (obj.detachEvent) {

	            /* The IE breaks if you're trying to detach an unattached event /msdn.microsoft.com/en-us/library/ms536411(VS.85).aspx */

	            if (obj[type + fn] === undefined) {

	                alert('Helper.removeEvent » Pointer to detach event is undefined - perhaps you are trying to detach an unattached event?');

	            }

	            obj.detachEvent('on' + type, obj[type + fn]);

	            obj[type + fn] = null;

	            obj['e' + type + fn] = null;

	        }

	    },

	    /* Set image opacity */

	    setOpacity: function (object, value) {

	        if (my.opacity === true) {

	            object.style.opacity = value / 10;

	            object.style.filter = 'alpha(opacity=' + value * 10 + ')';

	        }

	    },

	    /* Create HTML elements */

	    createDocumentElement: function (type, id, optionalClass) {

	        var element = document.createElement(type);

	        element.setAttribute('id', my.ImageFlowID + '_' + id);

	        if (optionalClass !== undefined) {

	            id += ' ' + optionalClass;

	        }

	        my.Helper.setClassName(element, id);

	        return element;

	    },

	    /* Set CSS class */

	    setClassName: function (element, className) {

	        if (element) {

	            element.setAttribute('class', className);

	            element.setAttribute('className', className);

	        }

	    },

	    /* Suppress default browser behaviour to avoid image/text selection while dragging */

	    suppressBrowserDefault: function (e) {

	        if (e.preventDefault) {

	            e.preventDefault();

	        }

	        else {

	            e.returnValue = false;

	        }

	        return false;

	    },

	    /* Add functions to the window.onresize event - can not be done by addEvent */

	    addResizeEvent: function () {

	        var otherFunctions = window.onresize;

	        if (typeof window.onresize != 'function') {

	            window.onresize = function () {

	                my.refresh();

	            };

	        }

	        else {

	            window.onresize = function () {

	                if (otherFunctions) {

	                    otherFunctions();

	                }

	                my.refresh();

	            };

	        }

	    }

	};

}

/* DOMContentLoaded event handler - by Tanny O'Haley [4] */

var domReadyEvent =

{

    name: "domReadyEvent",

    /* Array of DOMContentLoaded event handlers.*/

    events: {},

    domReadyID: 1,

    bDone: false,

    DOMContentLoadedCustom: null,

    /* Function that adds DOMContentLoaded listeners to the array.*/

    add: function (handler) {

        /* Assign each event handler a unique ID. If the handler has an ID, it has already been added to the events object or been run.*/

        if (!handler.$$domReadyID) {

            handler.$$domReadyID = this.domReadyID++;

            /* If the DOMContentLoaded event has happened, run the function. */

            if (this.bDone) {

                handler();

            }

            /* store the event handler in the hash table */

            this.events[handler.$$domReadyID] = handler;

        }

    },

    remove: function (handler) {

        /* Delete the event handler from the hash table */

        if (handler.$$domReadyID) {

            delete this.events[handler.$$domReadyID];

        }

    },

    /* Function to process the DOMContentLoaded events array. */

    run: function () {

        /* quit if this function has already been called */

        if (this.bDone) {

            return;

        }

        /* Flag this function so we don't do the same thing twice */

        this.bDone = true;

        /* iterates through array of registered functions */

        for (var i in this.events) {

            this.events[i]();

        }

    },

    schedule: function () {

        /* Quit if the init function has already been called*/

        if (this.bDone) {

            return;

        }

        /* First, check for Safari or KHTML.*/

        if (/KHTML|WebKit/i.test(navigator.userAgent)) {

            if (/loaded|complete/.test(document.readyState)) {

                this.run();

            }

            else {

                /* Not ready yet, wait a little more.*/

                setTimeout(this.name + ".schedule()", 100);

            }

        }

        else if (document.getElementById("__ie_onload")) {

            /* Second, check for IE.*/

            return true;

        }

        /* Check for custom developer provided function.*/

        if (typeof this.DOMContentLoadedCustom === "function") {

            /* if DOM methods are supported, and the body element exists (using a double-check

            including document.body, for the benefit of older moz builds [eg ns7.1] in which

            getElementsByTagName('body')[0] is undefined, unless this script is in the body section) */

            if (typeof document.getElementsByTagName !== 'undefined' && (document.getElementsByTagName('body')[0] !== null || document.body !== null)) {

                /* Call custom function. */

                if (this.DOMContentLoadedCustom()) {

                    this.run();

                }

                else {

                    /* Not ready yet, wait a little more. */

                    setTimeout(this.name + ".schedule()", 250);

                }

            }

        }

        return true;

    },

    init: function () {

        /* If addEventListener supports the DOMContentLoaded event.*/

        if (document.addEventListener) {

            document.addEventListener("DOMContentLoaded", function () { domReadyEvent.run(); }, false);

        }

        /* Schedule to run the init function.*/

        setTimeout("domReadyEvent.schedule()", 100);

        function run() {

            domReadyEvent.run();

        }

        /* Just in case window.onload happens first, add it to onload using an available method.*/

        if (typeof addEvent !== "undefined") {

            addEvent(window, "load", run);

        }

        else if (document.addEventListener) {

            document.addEventListener("load", run, false);

        }

        else if (typeof window.onload === "function") {

            var oldonload = window.onload;

            window.onload = function () {

                domReadyEvent.run();

                oldonload();

            };

        }

        else {

            window.onload = run;

        }

        /* for Internet Explorer */

        /*@cc_on

        @if (@_win32 || @_win64)

        document.write("<script id=__ie_onload defer src=\"//:\"><\/script>");

        var script = document.getElementById("__ie_onload");

        script.onreadystatechange = function () {

            if (this.readyState == "complete") {

                domReadyEvent.run(); // call the onload handler

            }

        };

        @end

        @*/

    }

};

var domReady = function (handler) { domReadyEvent.add(handler); };

domReadyEvent.init();

/* Create ImageFlow instances when the DOM structure has been loaded */

domReady(function ()

{

    var instanceOne = new ImageFlow();

    instanceOne.init({ ImageFlowID: 'starsIF',

        captions: false,

        slider: false,

        startID: Number($("#S_Num").val()) + 1

    });

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>3d</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/imageflow.js"></script>
</head>
<style>
.imageflow{
overflow:hidden;
position:relative;
text-align:left;
visibility:hidden;
width:100%
}
.imageflow img{
border:none;
position:absolute;
top:0px;
visibility:hidden;
}
</style>
<body>
<div id="LoopDiv">
<input id="S_Num" type="hidden" value="8" />
<div id="starsIF" class="imageflow">
<img src="data:images/211414202_R.png" />
<img src="data:images/195739743_R.jpg" />
<img src="data:images/184449150_R.png" />
<img src="data:images/171852304_R.png" />
<img src="data:images/195359252_R.jpg" />
<img src="data:images/205427556_R.jpg" />
<img src="data:images/195001998_R.jpg" />
<img src="data:images/121306920_R.jpg" />
<img src="data:images/151817631_R.jpg" />
<img src="data:images/172141456_R.jpg" />
<img src="data:images/105953334_R.jpg" />
<img src="data:images/092950120_R.jpg" />
<img src="data:images/112020805_R.jpg" />
<img src="data:images/210858906_R.jpg" />
<img src="data:images/202510490_R.jpg" />
<img src="data:images/211605770_R.jpg" />
</div>
</div>
</body>
</html>

第一次用写一个3d轮播的更多相关文章

原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
3D轮播切换特效源码
这个3D轮播切换特效是我2017年2月份写的当初我刚接触HTML不久,现在把源码分享给大家源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范每个浏览器 ...
小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
微信小程序之 3d轮播（swiper来实现）
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...
CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

Race condition
在很多门课上都接触到race condition, 其中也举了很多方法解决这个问题.于是想来总结一下这些方法. Race condition 它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺 ...
201621123080 《Java程序设计》第10周学习总结
201621123080 <Java程序设计>第10周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业本次PTA作业题集异常 ...
【Python学习之五】高级特性2（切片、迭代、列表生成器、生成器、迭代器）
2.迭代如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration).在Python中,迭代是通过for ... in来完成的. ...
Win10家庭版找不到组策略gpedit.msc
首先在桌面上建立一个txt文本文件,将下面的代码复制到里面 @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages ...
kafka的初认识
学习地址: http://www.jikexueyuan.com/course/1716_3.html?ss=1 http://www.jikexueyuan.com/course/kafka/ zo ...
五一4天就背这些Python面试题了，Python面试题No12
第1题: Python 中的 os 模块常见方法? os 属于 python内置模块,所以细节在官网有详细的说明,本道面试题考察的是基础能力了,所以把你知道的都告诉面试官吧官网地址 https:// ...
1.python中的变量
什么是变量 1.在任何语言中都有变量的概念,在python中变量是用一个变量名表示,变量名必须是用大小写英文字母,数字,下滑写(_)组成.不能用数字开头.(但用中文做变量名也可以,不要这样做) 例: ...
Python之路-时间模块
time模块 import time 时间戳(time.time())--结构化时间(time.localtime)--字符串时间(time.strftime) import time print(t ...
$(MAKE) , make命令
make 定义了很多默认变量,像常用的命令或者是命令选项之类的,什么CC啊,CFLAGS啊之类.$(MAKE)就是预设的 make 这个命令的名称(或者路径).make -p 可以查看所有预定义的变量 ...
HDU - 1496 Equations （hash）
题意: 多组测试数据. 每组数据有一个方程 a*x1^2 + b*x2^2 + c*x3^2 + d*x4^2 = 0,方程中四个未知数 x1, x2, x3, x4 ∈ [-100, 100], 且 ...

第一次用写一个3d轮播

第一次用写一个3d轮播的更多相关文章

随机推荐

热门专题