rotate_tower

by mmalex

HTML

<div>
<h3>
Drag mouse on image
</h3>
    <img id="drag" draggable="false" onmousedown="down(event)"  src="https://static.turbosquid.com/Preview/2017/01/23__16_00_52/_0000.jpgF9F5722F-778A-4A66-9293-79CAF1053299Original-1.jpg" />
</div>

CSS

h3 {
	font-family: Arial;
}
img {
    width: 100%;
    cursor: ew-resize;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JavaScript

var isMouseDown = false
var page = 1;

function getSrc(i) {
return `https://static.turbosquid.com/Preview/2017/01/23__16_00_52/_0000.jpgF9F5722F-778A-4A66-9293-79CAF1053299Original-${i}.jpg`;
}
var el = document.getElementById("drag");
el.src = getSrc(15);

function move(e) {
    if (isMouseDown) {
		el.src = getSrc( Math.round(e.clientX / 10) % 60 + 1);
    }
}

function up(e) {
    isMouseDown = false;
}

function down(e) {
    isMouseDown = true;
}

document.addEventListener("mousemove", move);
document.addEventListener("mouseup", up);