- Необходимо менять исходное изображение. Пусть за счёт атрибута/свойства src.
- Т. к. используется мышь нужно обрабатывать два её события, для нашего тега img:
- mousedown - мышь зажата, запомнили координаты (по горизонтальной оси достаточно)
- mousemove - проверяем разницу на горизонтальной оси, по которой необходимо "сменить ракурс". Если она достигнута вызываем функцию смены изображения (пункт 3). Не забываем убрать обработчик mousemove с нашего тега img.
Замечание: для получения координат можно работать и с контейнером (в котором расположен тег img)
- Создаём функцию которая (в моём примере) меняет изображение на новое - путем смены значения свойства src
Вот мой пример:
JS
function nextImage(image) {
var imageNames = ["blackbird.jpg", "duck.jpg", "sheep.jpg"];
image.current++;
if (image.current === imageNames.length) image.current = 0;
image.src = "images/" + imageNames[image.current];
}
window.onload = function() {
var img = document.getElementById("main");
img.current = 1;// создаём новое свойство (счётчик)
img.onmousedown = function(event) {
var startX = event.clientX;
img.onmousemove = function(event) {
console.log(startX);
if (startX - event.clientX < -40) {
nextImage(this);
this.onmousemove = null;
}
};
return false; //Позволяет избавиться от стадартного обработчика
}
}
HTML
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href=""/>
<script src="type.js"></script>
</head>
<body>
<img id="main" src="images/duck.jpg">
</body>
</html>
Простой
