如何在同一页面中制作多个滑块？第二个滑块不起作用我的意思是所有滑块都在同一页面上工作，它们是不同的滑块。我认为它的名字是多个滑块。我找不到这方面的信息。
对不起我的英语。谢谢你的帮助。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(factory);
} else {
// Browser globals
root.Dragdealer = factory();
}
}(this, function () {
var Dragdealer = function(wrapper, options) {
this.bindMethods();
this.options = this.applyDefaults(options || {});
this.wrapper = this.getWrapperElement(wrapper);
if (!this.wrapper) {
return;
}
this.handle = this.getHandleElement(this.wrapper, this.options.handleClass);
if (!this.handle) {
return;
}
this.init();
this.bindEventListeners();
};
Dragdealer.prototype = {
defaults: {
disabled: false,
horizontal: true,
vertical: false,
slide: true,
steps: 0,
snap: false,
loose: false,
speed: 0.1,
xPrecision: 0,
yPrecision: 0,
handleClass: 'handle',
css3: true,
requestAnimationFrame: false,
activeClass: 'active',
tapping: true
},
init: function() {
if (this.options.css3) {
triggerWebkitHardwareAcceleration(this.handle);
}
this.value = {
prev: [-1, -1],
current: [this.options.x || 0, this.options.y || 0],
target: [this.options.x || 0, this.options.y || 0]
};
this.offset = {
wrapper: [0, 0],
mouse: [0, 0],
prev: [-999999, -999999],
current: [0, 0],
target: [0, 0]
};
this.change = [0, 0];
this.stepRatios = this.calculateStepRatios();
this.activity = false;
this.dragging = false;
this.tapping = false;
this.reflow();
if (this.options.disabled) {
this.disable();
}
},
applyDefaults: function(options) {
for (var k in this.defaults) {
if (!options.hasOwnProperty(k)) {
options[k] = this.defaults[k];
}
}
return options;
},
getWrapperElement: function(wrapper) {
if (typeof(wrapper) == 'string') {
return document.getElementById(wrapper);
} else {
return wrapper;
}
},
getHandleElement: function(wrapper, handleClass) {
var childElements,
handleClassMatcher,
i;
if (wrapper.getElementsByClassName) {
childElements = wrapper.getElementsByClassName(handleClass);
if (childElements.length > 0) {
return childElements[0];
}
} else {
handleClassMatcher = new RegExp('(^|\\s)' + handleClass + '(\\s|$)');
childElements = wrapper.getElementsByTagName('*');
for (i = 0; i < childElements.length; i++) {
if (handleClassMatcher.test(childElements[i].className)) {
return childElements[i];
}
}
}
},
calculateStepRatios: function() {
var stepRatios = [];
if (this.options.steps > 1) {
for (var i = 0; i <= this.options.steps - 1; i++) {
stepRatios[i] = i / (this.options.steps - 1);
}
}
return stepRatios;
},
setWrapperOffset: function() {
this.offset.wrapper = Position.get(this.wrapper);
},
calculateBounds: function() {
var bounds = {
top: this.options.top || 0,
bottom: -(this.options.bottom || 0) + this.wrapper.offsetHeight,
left: this.options.left || 0,
right: -(this.options.right || 0) + this.wrapper.offsetWidth
};
bounds.availWidth = (bounds.right - bounds.left) - this.handle.offsetWidth;
bounds.availHeight = (bounds.bottom - bounds.top) - this.handle.offsetHeight;
return bounds;
},
calculateValuePrecision: function() {
var xPrecision = this.options.xPrecision || Math.abs(this.bounds.availWidth),
yPrecision = this.options.yPrecision || Math.abs(this.bounds.availHeight);
return [
xPrecision ? 1 / xPrecision : 0,
yPrecision ? 1 / yPrecision : 0
];
},
bindMethods: function() {
this.animateWithRequestAnimationFrame = bind(this.animateWithRequestAnimationFrame, this);
this.animate = bind(this.animate, this);
this.onHandleMouseDown = bind(this.onHandleMouseDown, this);
this.onHandleTouchStart = bind(this.onHandleTouchStart, this);
this.onDocumentMouseMove = bind(this.onDocumentMouseMove, this);
this.onWrapperTouchMove = bind(this.onWrapperTouchMove, this);
this.onWrapperMouseDown = bind(this.onWrapperMouseDown, this);
this.onWrapperTouchStart = bind(this.onWrapperTouchStart, this);
this.onDocumentMouseUp = bind(this.onDocumentMouseUp, this);
this.onDocumentTouchEnd = bind(this.onDocumentTouchEnd, this);
this.onHandleClick = bind(this.onHandleClick, this);
this.onWindowResize = bind(this.onWindowResize, this);
},
bindEventListeners: function() {
// Start dragging
addEventListener(this.handle, 'mousedown', this.onHandleMouseDown);
addEventListener(this.handle, 'touchstart', this.onHandleTouchStart);
// While dragging
addEventListener(document, 'mousemove', this.onDocumentMouseMove);
addEventListener(this.wrapper, 'touchmove', this.onWrapperTouchMove);
// Start tapping
addEventListener(this.wrapper, 'mousedown', this.onWrapperMouseDown);
addEventListener(this.wrapper, 'touchstart', this.onWrapperTouchStart);
// Stop dragging/tapping
addEventListener(document, 'mouseup', this.onDocumentMouseUp);
addEventListener(document, 'touchend', this.onDocumentTouchEnd);
addEventListener(this.handle, 'click', this.onHandleClick);
addEventListener(window, 'resize', this.onWindowResize);
this.animate(false, true);
if (this.options.requestAnimationFrame) {
this.interval = requestAnimationFrame(this.animateWithRequestAnimationFrame);
} else {
this.timeOffset = 25;
this.interval = setInterval(this.animate, this.timeOffset);
}
},
unbindEventListeners: function() {
removeEventListener(this.handle, 'mousedown', this.onHandleMouseDown);
removeEventListener(this.handle, 'touchstart', this.onHandleTouchStart);
removeEventListener(document, 'mousemove', this.onDocumentMouseMove);
removeEventListener(this.wrapper, 'touchmove', this.onWrapperTouchMove);
removeEventListener(this.wrapper, 'mousedown', this.onWrapperMouseDown);
removeEventListener(this.wrapper, 'touchstart', this.onWrapperTouchStart);
removeEventListener(document, 'mouseup', this.onDocumentMouseUp);
removeEventListener(document, 'touchend', this.onDocumentTouchEnd);
removeEventListener(this.handle, 'click', this.onHandleClick);
removeEventListener(window, 'resize', this.onWindowResize);
if (this.options.requestAnimationFrame) {
cancelAnimationFrame(this.interval);
} else {
clearInterval(this.interval);
}
},
onHandleMouseDown: function(e) {
Cursor.refresh(e);
preventEventDefaults(e);
stopEventPropagation(e);
this.activity = false;
this.startDrag();
},
onHandleTouchStart: function(e) {
Cursor.refresh(e);
stopEventPropagation(e);
this.activity = false;
this.startDrag();
},
onDocumentMouseMove: function(e) {
Cursor.refresh(e);
if (this.dragging) {
this.activity = true;
}
},
onWrapperTouchMove: function(e) {
Cursor.refresh(e);
if (!this.activity && this.draggingOnDisabledAxis()) {
if (this.dragging) {
this.stopDrag();
}
return;
}
preventEventDefaults(e);
this.activity = true;
},
onWrapperMouseDown: function(e) {
Cursor.refresh(e);
preventEventDefaults(e);
this.startTap();
},
onWrapperTouchStart: function(e) {
Cursor.refresh(e);
preventEventDefaults(e);
this.startTap();
},
onDocumentMouseUp: function(e) {
this.stopDrag();
this.stopTap();
},
onDocumentTouchEnd: function(e) {
this.stopDrag();
this.stopTap();
},
onHandleClick: function(e) {
if (this.activity) {
preventEventDefaults(e);
stopEventPropagation(e);
}
},
onWindowResize: function(e) {
this.reflow();
},
enable: function() {
this.disabled = false;
this.handle.className = this.handle.className.replace(/\s?disabled/g, '');
},
disable: function() {
this.disabled = true;
this.handle.className += ' disabled';
},
reflow: function() {
this.setWrapperOffset();
this.bounds = this.calculateBounds();
this.valuePrecision = this.calculateValuePrecision();
this.updateOffsetFromValue();
},
getStep: function() {
return [
this.getStepNumber(this.value.target[0]),
this.getStepNumber(this.value.target[1])
];
},
getValue: function() {
return this.value.target;
},
setStep: function(x, y, snap) {
this.setValue(
this.options.steps && x > 1 ? (x - 1) / (this.options.steps - 1) : 0,
this.options.steps && y > 1 ? (y - 1) / (this.options.steps - 1) : 0,
snap
);
},
setValue: function(x, y, snap) {
this.setTargetValue([x, y || 0]);
if (snap) {
this.groupCopy(this.value.current, this.value.target);
this.updateOffsetFromValue();
this.callAnimationCallback();
}
},
startTap: function() {
if (this.disabled || !this.options.tapping) {
return;
}
this.tapping = true;
this.setWrapperOffset();
this.setTargetValueByOffset([
Cursor.x - this.offset.wrapper[0] - (this.handle.offsetWidth / 2),
Cursor.y - this.offset.wrapper[1] - (this.handle.offsetHeight / 2)
]);
},
stopTap: function() {
if (this.disabled || !this.tapping) {
return;
}
this.tapping = false;
this.setTargetValue(this.value.current);
},
startDrag: function() {
if (this.disabled) {
return;
}
this.dragging = true;
this.setWrapperOffset();
this.offset.mouse = [
Cursor.x - Position.get(this.handle)[0],
Cursor.y - Position.get(this.handle)[1]
];
if (!this.wrapper.className.match(this.options.activeClass)) {
this.wrapper.className += ' ' + this.options.activeClass;
}
},
stopDrag: function() {
if (this.disabled || !this.dragging) {
return;
}
this.dragging = false;
var target = this.groupClone(this.value.current);
if (this.options.slide) {
var ratioChange = this.change;
target[0] += ratioChange[0] * 4;
target[1] += ratioChange[1] * 4;
}
this.setTargetValue(target);
this.wrapper.className = this.wrapper.className.replace(' ' + this.options.activeClass, '');
},
callAnimationCallback: function() {
var value = this.value.current;
if (this.options.snap && this.options.steps > 1) {
value = this.getClosestSteps(value);
}
if (!this.groupCompare(value, this.value.prev)) {
if (typeof(this.options.animationCallback) == 'function') {
this.options.animationCallback.call(this, value[0], value[1]);
}
this.groupCopy(this.value.prev, value);
}
},
callTargetCallback: function() {
if (typeof(this.options.callback) == 'function') {
this.options.callback.call(this, this.value.target[0], this.value.target[1]);
}
},
animateWithRequestAnimationFrame: function (time) {
if (time) {
// using requestAnimationFrame
this.timeOffset = this.timeStamp ? time - this.timeStamp : 0;
this.timeStamp = time;
} else {
// using setTimeout(callback, 25) polyfill
this.timeOffset = 25;
}
this.animate();
this.interval = requestAnimationFrame(this.animateWithRequestAnimationFrame);
},
animate: function(direct, first) {
if (direct && !this.dragging) {
return;
}
if (this.dragging) {
var prevTarget = this.groupClone(this.value.target);
var offset = [
Cursor.x - this.offset.wrapper[0] - this.offset.mouse[0],
Cursor.y - this.offset.wrapper[1] - this.offset.mouse[1]
];
this.setTargetValueByOffset(offset, this.options.loose);
this.change = [
this.value.target[0] - prevTarget[0],
this.value.target[1] - prevTarget[1]
];
}
if (this.dragging || first) {
this.groupCopy(this.value.current, this.value.target);
}
if (this.dragging || this.glide() || first) {
this.updateOffsetFromValue();
this.callAnimationCallback();
}
},
glide: function() {
var diff = [
this.value.target[0] - this.value.current[0],
this.value.target[1] - this.value.current[1]
];
if (!diff[0] && !diff[1]) {
return false;
}
if (Math.abs(diff[0]) > this.valuePrecision[0] ||
Math.abs(diff[1]) > this.valuePrecision[1]) {
this.value.current[0] += diff[0] * this.options.speed * this.timeOffset / 25;
this.value.current[1] += diff[1] * this.options.speed * this.timeOffset / 25;
} else {
this.groupCopy(this.value.current, this.value.target);
}
return true;
},
updateOffsetFromValue: function() {
if (!this.options.snap) {
this.offset.current = this.getOffsetsByRatios(this.value.current);
} else {
this.offset.current = this.getOffsetsByRatios(
this.getClosestSteps(this.value.current)
);
}
if (!this.groupCompare(this.offset.current, this.offset.prev)) {
this.renderHandlePosition();
this.groupCopy(this.offset.prev, this.offset.current);
}
},
renderHandlePosition: function() {
var transform = '';
if (this.options.css3 && StylePrefix.transform) {
if (this.options.horizontal) {
transform += 'translateX(' + this.offset.current[0] + 'px)';
}
if (this.options.vertical) {
transform += ' translateY(' + this.offset.current[1] + 'px)';
}
this.handle.style[StylePrefix.transform] = transform;
return;
}
if (this.options.horizontal) {
this.handle.style.left = this.offset.current[0] + 'px';
}
if (this.options.vertical) {
this.handle.style.top = this.offset.current[1] + 'px';
}
},
setTargetValue: function(value, loose) {
var target = loose ? this.getLooseValue(value) : this.getProperValue(value);
this.groupCopy(this.value.target, target);
this.offset.target = this.getOffsetsByRatios(target);
this.callTargetCallback();
},
setTargetValueByOffset: function(offset, loose) {
var value = this.getRatiosByOffsets(offset);
var target = loose ? this.getLooseValue(value) : this.getProperValue(value);
this.groupCopy(this.value.target, target);
this.offset.target = this.getOffsetsByRatios(target);
},
getLooseValue: function(value) {
var proper = this.getProperValue(value);
return [
proper[0] + ((value[0] - proper[0]) / 4),
proper[1] + ((value[1] - proper[1]) / 4)
];
},
getProperValue: function(value) {
var proper = this.groupClone(value);
proper[0] = Math.max(proper[0], 0);
proper[1] = Math.max(proper[1], 0);
proper[0] = Math.min(proper[0], 1);
proper[1] = Math.min(proper[1], 1);
if ((!this.dragging && !this.tapping) || this.options.snap) {
if (this.options.steps > 1) {
proper = this.getClosestSteps(proper);
}
}
return proper;
},
getRatiosByOffsets: function(group) {
return [
this.getRatioByOffset(group[0], this.bounds.availWidth, this.bounds.left),
this.getRatioByOffset(group[1], this.bounds.availHeight, this.bounds.top)
];
},
getRatioByOffset: function(offset, range, padding) {
return range ? (offset - padding) / range : 0;
},
getOffsetsByRatios: function(group) {
return [
this.getOffsetByRatio(group[0], this.bounds.availWidth, this.bounds.left),
this.getOffsetByRatio(group[1], this.bounds.availHeight, this.bounds.top)
];
},
getOffsetByRatio: function(ratio, range, padding) {
return Math.round(ratio * range) + padding;
},
getStepNumber: function(value) {
// Translate a [0-1] value into a number from 1 to N steps (set using the
// "steps" option)
return this.getClosestStep(value) * (this.options.steps - 1) + 1;
},
getClosestSteps: function(group) {
return [
this.getClosestStep(group[0]),
this.getClosestStep(group[1])
];
},
getClosestStep: function(value) {
var k = 0;
var min = 1;
for (var i = 0; i <= this.options.steps - 1; i++) {
if (Math.abs(this.stepRatios[i] - value) < min) {
min = Math.abs(this.stepRatios[i] - value);
k = i;
}
}
return this.stepRatios[k];
},
groupCompare: function(a, b) {
return a[0] == b[0] && a[1] == b[1];
},
groupCopy: function(a, b) {
a[0] = b[0];
a[1] = b[1];
},
groupClone: function(a) {
return [a[0], a[1]];
},
draggingOnDisabledAxis: function() {
return (!this.options.horizontal && Cursor.xDiff > Cursor.yDiff) ||
(!this.options.vertical && Cursor.yDiff > Cursor.xDiff);
}
};
var bind = function(fn, context) {
/**
* CoffeeScript-like function to bind the scope of a method to an instance,
* the context of that method, regardless from where it is called
*/
return function() {
return fn.apply(context, arguments);
};
};
// Cross-browser vanilla JS event handling
var addEventListener = function(element, type, callback) {
if (element.addEventListener) {
element.addEventListener(type, callback, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, callback);
}
};
var removeEventListener = function(element, type, callback) {
if (element.removeEventListener) {
element.removeEventListener(type, callback, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, callback);
}
};
var preventEventDefaults = function(e) {
if (!e) {
e = window.event;
}
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
};
var stopEventPropagation = function(e) {
if (!e) {
e = window.event;
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble = true;
};
var Cursor = {
x: 0,
y: 0,
xDiff: 0,
yDiff: 0,
refresh: function(e) {
if (!e) {
e = window.event;
}
if (e.type == 'mousemove') {
this.set(e);
} else if (e.touches) {
this.set(e.touches[0]);
}
},
set: function(e) {
var lastX = this.x,
lastY = this.y;
if (e.clientX || e.clientY) {
this.x = e.clientX;
this.y = e.clientY;
} else if (e.pageX || e.pageY) {
this.x = e.pageX - document.body.scrollLeft - document.documentElement.scrollLeft;
this.y = e.pageY - document.body.scrollTop - document.documentElement.scrollTop;
}
this.xDiff = Math.abs(this.x - lastX);
this.yDiff = Math.abs(this.y - lastY);
}
};
var Position = {
get: function(obj) {
var rect = {left: 0, top: 0};
if (obj.getBoundingClientRect !== undefined) {
rect = obj.getBoundingClientRect();
}
return [rect.left, rect.top];
}
};
var StylePrefix = {
transform: getPrefixedStylePropName('transform'),
perspective: getPrefixedStylePropName('perspective'),
backfaceVisibility: getPrefixedStylePropName('backfaceVisibility')
}
function getPrefixedStylePropName(propName) {
var domPrefixes = 'Webkit Moz ms O'.split(' '),
elStyle = document.documentElement.style;
if (elStyle[propName] !== undefined) return propName; // Is supported unprefixed
propName = propName.charAt(0).toUpperCase() + propName.substr(1);
for (var i = 0; i < domPrefixes.length; i++) {
if (elStyle[domPrefixes[i] + propName] !== undefined) {
return domPrefixes[i] + propName; // Is supported with prefix
}
}
};
function triggerWebkitHardwareAcceleration(element) {
if (StylePrefix.backfaceVisibility && StylePrefix.perspective) {
element.style[StylePrefix.perspective] = '1000px';
element.style[StylePrefix.backfaceVisibility] = 'hidden';
}
};
var vendors = ['webkit', 'moz'];
var requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;
for(var x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
};
if (!requestAnimationFrame) {
requestAnimationFrame = function (callback) {
return setTimeout(callback, 25);
};
cancelAnimationFrame = clearTimeout;
};
return Dragdealer;
}));
/**
* Custom JS
*/
var draggie = new Dragdealer('image-carousel', {
steps: 4,
speed: 0.1,
loose: true,
requestAnimationFrame: true,
vertical: true,
horizontal:false,
callback: function(x, y) {
var active = parseInt(y*3);
console.log(y, active);
$('li.active').removeClass('active');
$('li:eq('+active+')').addClass('active');
}
});
$(document).on('click', 'li', function(e) {
var eq = $(this).index();
draggie.setStep(0, eq+1);
});body {
padding: 0;
background: #222;
}
.wrapper {
width: 680px;
margin: auto;
padding-top: 85px;
}
/* Image carousel */
#image-carousel {
height: 350px;
border-radius: 0;
overflow: hidden;
cursor: move;
cursor: -moz-grab;
cursor: -webkit-grab;
position: relative;
margin-bottom:50px;
}
#image-carousel:active {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#image-carousel .handle {
width: 100%;
height: 400%;
border-radius: 0;
}
#image-carousel .handle .slide {
float: left;
position: relative;
width: 100%;
height: 25%;
background-repeat: no-repeat;
background-position: center center;
}
#image-carousel .pagination {
position: absolute;
z-index: 1000;
left: 5px;
top: 5px;
list-style-type: none;
padding: 0;
margin: 0;
}
#image-carousel .pagination li {
border-radius: 50%;
border: 2px solid #fff;
width: 8px;
height: 8px;
padding: 0;
margin: 3px;
cursor: pointer;
}
#image-carousel .pagination li.active {
background: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<div id="image-carousel" class="dragdealer">
<div class="handle">
<div class="slide img1">
<img src="http://placehold.it/680x350/e74c3c/ffffff&text=Dragdealer" />
</div>
<div class="slide img2">
<img src="http://placehold.it/680x350/3498db/ffffff&text=Is" />
</div>
<div class="slide img3">
<img src="http://placehold.it/680x350/2ecc71/ffffff&text=Totally" />
</div>
<div class="slide img4">
<img src="http://placehold.it/680x350/7f8c8d/ffffff&text=Awesome" />
</div>
</div>
<ul class="pagination">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="image-carousel" class="dragdealer">
<div class="handle">
<div class="slide img1">
<img src="http://placehold.it/680x350/e74c3c/ffffff&text=Dragdealer" />
</div>
<div class="slide img2">
<img src="http://placehold.it/680x350/3498db/ffffff&text=Is" />
</div>
<div class="slide img3">
<img src="http://placehold.it/680x350/2ecc71/ffffff&text=Totally" />
</div>
<div class="slide img4">
<img src="http://placehold.it/680x350/7f8c8d/ffffff&text=Awesome" />
</div>
</div>
<ul class="pagination">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>