Ein Großteil des Problems, wenn Sie Ihr eigenes rollen, ist die Handhabung von Mausereignissen, während versehentliche Klicks verhindert und verfolgt wird, wohin Dinge gezogen wurden. Sie können transform: translateX(); verwenden, um die Bewegung über CSS auszuführen.
Ich habe so etwas wie dies vor einiger Zeit für eine Drehung auf der Maus per Drag in reinem Javascript, wenn ich spiele um einen roguelike mit reinem HTML5 zu machen:
https://dl.dropboxusercontent.com/u/12933950/gridTest/grid.html
(ich einige jQuery später hinzugefügt, aber zum Glück Ich habe die Maus in JS gedreht.
Aus irgendeinem Grund fühlte ich den Impuls, eine Stunde zu Ihrer Lösung zu passen. Ich hätte dir eine Anweisung gegeben und es dabei belassen, aber ich wollte sicherstellen, dass es funktioniert, und es wäre schön, wenn eines meiner ersten JavaScript-Projekte jemandem wirklich nutzen würde.
Sie müssen wahrscheinlich dies für Ihre Bedürfnisse beheben (wenn dieser Ansatz für Sie überhaupt funktioniert), wie mit transform auf den Schaltflächen, wie sie die Mitte des Bildschirms nähern (Ich habe die Antwort für eine 1: 1 Bewegung/Mausgeschwindigkeit durch Ändern der Geschwindigkeit zu window.innerWidth), also denke ich nicht, dass es Schaden gibt, mit dem du alles da draußen spielst.
http://codepen.io/jackarbiter/pen/jAaPAQ?editors=1111
Bitte beachte, dass ich eine ID an der pk-Slider-Base zugegeben, aber der Rest war alle js Änderungen.
Ich kann mich nicht erinnern, ob meine alte Lösung zum Ziehen auf Handys funktioniert - einer der Gründe, warum viele Leute jQuery-UI verwenden, ist, dass sie tun können, was sie für Mausereignisse tun und dann Touchpunch für mobile und hinzufügen damit fertig sein.
Es hat auch einige Kommentare, die erklären, was vor sich geht, aber nicht vollständig kommentiert (ich war schlecht über das damals), also wenn Sie irgendwelche Fragen haben, lassen Sie es mich wissen.
var started = 0,
xOff = 0,
oldX = 0,
pageX = 0,
yourTrans = "",
dragData = 0,
downTime = 0,
finalX = 0,
mySpeed = window.innerWidth,
yourElement = document.getElementById('pk-slider-base');
function updateView() {
"use strict";
finalX = pageX * mySpeed;
yourTrans = 'translateX(' + finalX + 'px)';
yourElement.style.transform = yourTrans;
}
function setDrag() {
"use strict";
if (dragData === 0) {
dragData = 1;
}
}
function startDrag(ev) {
"use strict";
downTime = window.setTimeout(setDrag, 100);
ev.preventDefault();
}
function drag(ev) {
"use strict";
if (dragData === 1) {
if (started === 0) {
//offset initial start position to result in 0
xOff = (ev.clientX/window.innerWidth);
//initial position (first drag) or last position
oldX = pageX;
started = 1;
}
pageX = ((ev.clientX/window.innerWidth) - xOff) + oldX;
//set new offset or the position will exponentially increase
xOff = (ev.clientX/window.innerWidth);
updateView();
oldX = pageX;
}
}
function stopDrag(ev) {
"use strict";
window.clearTimeout(downTime);
if (dragData === 1) {
dragData = 0;
}
//setup for next drag
started = 0;
}
window.addEventListener('mousedown', startDrag, false);
window.addEventListener('mousemove', drag, false);
window.addEventListener('mouseup', stopDrag, false);
updateView();
.pk-slider {
height: 100px; }
.pk-slider .pk-slider-base {
height: 1px;
background-color: #c8cfd9;
margin-top: 55px;
margin-bottom: 10px;
width: 10000px;
margin-left: -5000px;
text-align: center; }
.pk-slider .pk-slider-base > div {
display: inline-block; }
.pk-slider .pk-slider-base .pk-slider-point {
height: 50px;
width: 50px;
float: left;
text-align: center;
margin-top: -25px;
margin-left: 200px;
margin-right: 200px;
position: relative; }
.pk-slider .pk-slider-base .pk-slider-point > a {
display: block;
height: 50px;
width: 50px; }
.pk-slider .pk-slider-base .pk-slider-point .point {
display: block;
float: left;
text-align: center;
margin: 16px;
height: 18px;
width: 18px;
line-height: 18px;
border-radius: 9px;
background-color: #c8cfd9;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease; }
.pk-slider .pk-slider-base .pk-slider-point .point.active {
height: 50px;
width: 50px;
line-height: 50px;
border-radius: 25px;
background-color: #3f4c5f;
margin: 0; }
.pk-slider .pk-slider-base .pk-slider-point .pk-label {
z-index: -1;
position: absolute;
text-align: center;
width: 1000px;
top: 38px;
left: -475px;
color: #c8cfd9;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease; }
.pk-slider .pk-slider-base .pk-slider-point .pk-label.active {
top: 50px;
color: #3f4c5f; }
<div class="pk-slider">
<div class="pk-slider-base" style="margin-left: -4100px;" id="pk-slider-base">
<div>
<div class="pk-slider-point">
<p class="pk-label">Family holidays</p>
<a href="#">
<div class="point"></div>
</a>
</div>
<div class="pk-slider-point">
<p class="pk-label">Sporting activities</p>
<a href="#">
<div class="point"></div>
</a>
</div>
<div class="pk-slider-point">
<p class="pk-label">Travel</p>
<a href="#">
<div class="point"></div>
</a>
</div>
<div class="pk-slider-point">
<p class="pk-label active">Photography is my passion</p>
<a href="#">
<div class="point active"></div>
</a>
</div>
<div class="pk-slider-point">
<p class="pk-label">Nights out</p>
<a href="#">
<div class="point"></div>
</a>
</div>
<div class="pk-slider-point">
<p class="pk-label">Special occasions</p>
<a href="#">
<div class="point"></div>
</a>
</div>
<div class="pk-slider-point">
<p class="pk-label">Family holidays</p>
<a href="#">
<div class="point"></div>
</a>
</div>
</div>
</div>
</div>
Ohne jQuery, fein. Was ist mit richtigem Javascript? – ggdx
@Dan Javascript ist in den Tags aufgeführt. – user2867288
yeah JavaScript ist in Ordnung :) – r3plica