JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下:
代码：
<!DOCTYPE html>
<html xmlns="/www.w3.org/1999/xhtml">
<head>
<title>jQuery图片轮播插件</title> <link type="text/css" rel="Stylesheet" href="css/imageflow.css" /> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/imageflow.js"></script> </head>
<body> <h3>3D旋转图片轮播效果（支持滚轮）</h3> <div id="LoopDiv">
<input id="S_Num" type="hidden" value="8" />
<div id="starsIF" class="imageflow">
<img src="data:images/1.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/2.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/1.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/3.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/4.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/5.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/6.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/1.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/2.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/3.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/4.png" longdesc="#" width="280" height="300" alt="Picture" />
<img src="data:images/5.png" longdesc="#" width="280" height="300" alt="Picture" />
</div>
</div>
<div class="clear"></div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
imageflow.js 源码文件
/* 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: false, /* Toggle captions */
circular: true, /* 循环 */
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: 3000, /* Time between slides in ms */
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
});
});
JQ 实现轮播图（3D旋转图片轮播效果）的更多相关文章
- jquery特效（4）—轮播图②（定时自动轮播）
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- 01.轮播图之一 ：scrollView 轮播
接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...
- Android 轮播图Banner切换图片的效果
Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910 版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- Axure 图片轮播（广告通栏图片自动播放效果）
baiduYunpan:http://pan.baidu.com/s/1eRPCy90 里面的“图片轮播”部件即可实现这个功能
- jquery 焦点轮播图控制每张图片停留不同时间
轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间 *{ padding:0px; border:0px; margin:0px; } ul { list-style: ...
随机推荐
- spring boot 整合js css 静态文件
一,添加配置 spring: application: name: interview-server resources: static-locations: file:config/statics ...
- Linux格式化、挂载及卸载数据盘
注意: 磁盘分区和格式化是高风险行为,请慎重操作.本文档描述如何处理一个新买的数据盘,如果您的数据盘上有数据,请务必对数据进行备份以避免可能的数据丢失. 服务器仅支持对 数据盘 进行分区,而不支持对 ...
- IO流（三）
五.Java序列化 概述 Java序列化是指把Java对象转换为字节序列的过程 Java反序列化是指把字节序列恢复为Java对象的过程 当两个Java进程进行通信时,发送方需要把这个Java对象转换为 ...
- Flask实战-留言板-使用Flask-DebugToolbar调试程序、Flask配置的两种组织形式
使用Flask-DebugToolbar调试程序 扩展Flask-DebugToolbar提供了一系列调试功能,可以用来查看请求的SQL语句.配置选项.资源加载情况等信息.这些信息在开发时会非常有用. ...
- maven打包并上传到nexus3私服
之前搭了个maven私服,接下来则要充分利用这个私服的优势上传自己的jar包了. 我们先在nexus上创建一个用来上传jar包的角色,并通过此角色创建若干帐号用来给开发者上传包.如图是我自己的配置: ...
- php读取文件使用redis的pipeline（管道）导入大批量数据
需求:需要做一个后台上传TXT文件,读取其中的内容,然后导入redis库中.要求速度快,并且支持至少10W以上的数据,而内容也就一个字段存类似openid和QQ 传统做法:我一开始做的时候就老套路,遍 ...
- random模块、time模块、sys模块、os模块
一.random模块 1.随机取小数 (数学计算) print(random.random()) #取0-1之间的小数 print(random.uniform(3,6)) #uniform( ...
- P4174 [NOI2006]最大获利（网络流）
P4174 [NOI2006]最大获利 还是最大权闭合子图的题 对于每个中转站$k$:$link(k,T,P_k)$ 对于每个用户$i$.中转站$A_i,B_i$.贡献$C_i$ $link(S,i, ...
- Rabbit原理理解
1.RabbitMQ知多少 圣杰 2.[RabbitMQ]——三种Exchange模式(Fanout.Direct.Topic) https://blog.csdn.net/hao134838/a ...
- freeswitch 事件命令
1.uuid_bridge 桥接两条呼叫的腿. Usage: uuid_bridge <uuid> <other_uuid> uuid_bridge至少需要有一条腿是被呼通的. ...