DHTML

pokud budou názvy souborů stejné, akorát s jiným pořadovým číslem (např. foto0.jpg, foto1.jpg, ...,foto9.jpg) tak to asi půjde jednoduchým JS:
-Pomocí onclick vyvoláš fci která bude k poředovému číslu přičítat jedna dokud to nebude 9, pak nastaví zase 1
výstup bude <img src="fotoi.jpg"/> kde i je proměnná která se mění.

Další možnost je, když jich je jenom 10 dát je do pole. jinak mě zrovna nic jednoduchého nenapadá, ale v JS se zas tak nevyznám, takže je možné že existuje i další jednoduché řešení.

Pak se dá taky použít např. PHP ale to by se stránka musela pokaždé celá znovu stahovat

Já bych dal do pole srcy těch obrázků (můžou se klidně jmenovat různě a být umístěný každý jinde). Na onclick zavolat funkci, která jen zvýší index o 1 a přes document.getElementById změní src zobrazeného obrázku. Plus ta podmínka 9 -> 1

tak nějak jsem to s tim polem myslel, ale má to tu nevýhodu že když jich bude víc než 10 ( o hodně) tak to bude dost pracný, ale pro tenhle případ je to asi lepší

<script type="text/javascript">

var i=0;

function change()

{

if (i==9) i=0; else i+=1;

document.getElementById("nevolte-socany").src="pic"+i+".jpg";

}

</script>

<img id="nevolte-socany" src="pic0.jpg" onclick="change()" />

Podmínky: obrázků je deset a jmenují se pic0.jpg , pic1.jpg, ... , pic9.jpg. Jsou umístěny ve stejném adresáři jako html soubor.
Pokud chceš aby se zobrazovala nad obrázkem "ručka", přidej si do css
#nevolte-socany {cursor:pointer;}
Pokud mají obrázky stejné rozměry, můžeš je natvrdo napsat do tagu img. Pokud mají různé, můžeš se na to vykašlat (nečisté, ale funkční), nebo by se to pak už muselo řešit celé polem, jak jsem psal výše.