JQuery

Jquery uygulama

by admin_ufuk · Mart 5, 2020

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>

You may also like...

Bir cevap yazın