first, last, eq kullanımı.
resimler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var resim_metni;
$(document).ready(function(){
for (let index = 1; index < 10; index++) {
var resim= document.createElement("img");
resim.src=index + ".jpg";
resim.className="kutu";
$("div").append(resim);
$("img").hide();
}
$("#ilk_resim_getir").click(function(){
$("#ilk_resim_getir").val("İlk Resim Geldi");
$("img").first().show(1100);
});
$("#son_resim_getir").click(function(){
$("#son_resim_getir").val("Son Resim Geldi");
$("img").last().show(1100);
});
$("#tum_resim_getir").click(function(){
$("#tum_resim_getir").val("Hepsi Geldi");
$("img").show(1100);
});
$("#resim_noya_gore").click(function(){
$("img").eq($("#resim_no").val()).show(1000);
});
$("#ileri_resim_getir").click(function(){
var deger = $("#resim_no").val();
deger++;
$("#resim_no").val(deger);
$("img").eq($("#resim_no").val()).show(1000);
});
$("#geri_resim_getir").click(function(){
var deger = $("#resim_no").val();
deger--;
$("#resim_no").val(deger);
$("img").eq($("#resim_no").val()).show(1000);
});
});
</script>
</head>
<body>
<input type="text" id="resim_no">
<input type="button" id="resim_noya_gore" value="Resim No">
<input type="button" id="son_resim_getir" value=">>">
<input type="button" id="ilk_resim_getir" value="<<">
<input type="button" id="tum_resim_getir" value="--">
<input type="button" id="ileri_resim_getir" value=">">
<input type="button" id="geri_resim_getir" value="<">
<div> Buraya</div>
</body>
</html>