JSFiddle - React, Tailwind, and code Playground

by andfinally

HTML

<img id="image" src="Images/100.jpg">     

<a href="javascript:void(0)" id="prev"><img border="0" src="Assets/Left.png" /></a>
<a href="javascript:void(0)" id="next"><img border="0" src="Assets/Right.png"/></a>

JavaScript

$(document).ready(function(){
   
    $('#prev').click(function(){
       move(-1); 
    });
    
    $('#next').click(function(){
        move(1);
    });
    
    function move(n) {
        var img = $('#image');
        var src = img.attr('src');
        var num = src.substr(7).replace(/\.jpg/, '');
        var newNum = Number(num) + Number(n);
        img.attr('src', 'Images/' + String(newNum) + '.jpg');
    }    
    
});