intojs/dom-pointer.html

## dom-pointer.html
<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .row {
            overflow: hidden;
            margin-bottom: 5px;
        }

        .row > div {
            width: 25%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }

        .row > div:nth-child(even) {
            background-color: #EEE;
        }

        .row > div:nth-child(odd) {
            background-color: #DDD;
        }

        .current {
            background-color: yellow !important;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="start">right</div>
        <div>down</div>
        <div>right</div>
        <div>down</div>
    </div>
    <div class="row">
        <div>left</div>
        <div>right</div>
        <div>up</div>
        <div>down</div>
    </div>
    <div class="row">
        <div>right</div>
        <div>down</div>
        <div>left</div>
        <div>left</div>
    </div>
    <div class="row">
        <div>down</div>
        <div>right</div>
        <div>right</div>
        <div>right</div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript">
    'use strict';

    function pointer(currentElement) {

        currentElement.addClass('current');

        let parent = currentElement.parent();
        let nextElement;

        switch (currentElement.html()) {
            case 'right':
                nextElement = currentElement.next();
                break;
            case 'left':
                nextElement = currentElement.prev();
                break;
            case 'up':
                nextElement = parent
                    .prev()
                    .find(currentElement.prop('tagName'))
                    .eq(currentElement.index());
                break;
            case 'down':
                nextElement = parent
                    .next()
                    .find(currentElement.prop('tagName'))
                    .eq(currentElement.index());
                break;
        }

        setTimeout(() => {
            currentElement.removeClass('current');
            if (nextElement.length > 0) {
                pointer(nextElement);
            }
        }, 1500);
    }

    $(document).ready(() => {
        let startElement = $('.start');
        pointer(startElement);
    });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	}

	.row {
	overflow: hidden;
	margin-bottom: 5px;
	}

	.row > div {
	width: 25%;
	float: left;
	padding: 20px;
	box-sizing: border-box;
	}

	.row > div:nth-child(even) {
	background-color: #EEE;
	}

	.row > div:nth-child(odd) {
	background-color: #DDD;
	}

	.current {
	background-color: yellow !important;
	}
	</style>
	</head>

	<body>
	<div class="row">
	<div class="start">right</div>
	<div>down</div>
	<div>right</div>
	<div>down</div>
	</div>
	<div class="row">
	<div>left</div>
	<div>right</div>
	<div>up</div>
	<div>down</div>
	</div>
	<div class="row">
	<div>right</div>
	<div>down</div>
	<div>left</div>
	<div>left</div>
	</div>
	<div class="row">
	<div>down</div>
	<div>right</div>
	<div>right</div>
	<div>right</div>
	</div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
	<script type="text/javascript">
	'use strict';

	function pointer(currentElement) {

	currentElement.addClass('current');

	let parent = currentElement.parent();
	let nextElement;

	switch (currentElement.html()) {
	case 'right':
	nextElement = currentElement.next();
	break;
	case 'left':
	nextElement = currentElement.prev();
	break;
	case 'up':
	nextElement = parent
	.prev()
	.find(currentElement.prop('tagName'))
	.eq(currentElement.index());
	break;
	case 'down':
	nextElement = parent
	.next()
	.find(currentElement.prop('tagName'))
	.eq(currentElement.index());
	break;
	}

	setTimeout(() => {
	currentElement.removeClass('current');
	if (nextElement.length > 0) {
	pointer(nextElement);
	}
	}, 1500);
	}

	$(document).ready(() => {
	let startElement = $('.start');
	pointer(startElement);
	});
	</script>
	</body>

	</html>