Jquery uygulama
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>