Bir divin içinde 3 resmi 1 dk arayla nasıl gösteririm

0

Yapmak istediğim bir div'in için 3 resmi sırayla değiştirerek göstere bilmek bunun için hangi kodları kullanmam lazım. 

-Jquery kütüphanesini kullanıyorum..

kutlugalp kutlugalp (136)
7 yıl önce sordu

    Toplam 1 Cevap


    1

    Bu yapmak istediğin genelde Slider olarak adlandırılır.  Eğer hazır kütüphane kullanmak istersen BXSlider içini görecektir

    http://bxslider.com/examples/auto-show-start-stop-controls

    Kullanımı kolaydır. Jquery ve BXSlider kütüphane dosyalarını html belgene ekledikten sonra 

    <ul class="bxslider">
      <li><img src="/images/resim1.jpg" /></li>
      <li><img src="/images/resim2.jpg" /></li>
      <li><img src="/images/resim3.jpg" /></li>
    </ul>

    şeklinde resimlerini ekliyorsun. 

    Daha sonra şu script kodunu sayfana ekliyorsun:

    <script>
    $(function(){
    $('.bxslider').bxSlider({
      auto: true,
      autoControls: true
    });
    })
    </script>

    ayrıca kütüphanenin pek çok özelliği var.  Resimlerin kayış stilini değiştirebilirsin, hızlandırabilirsin vb.

    Buna benzer bir image slider ben yapayım dersen burada da örnek kod var: https://codepen.io/zuraizm/pen/vGDHl

    Düzenleme:

    Çok basit bir şey yapmak istersen şu örneğe bakabilirsin.

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <style>
            img{
             width:300px;
             height:300px;
             display:none
            }
        </style>
        <div id="slider">
            <img id="1" src="1.jpg" />
            <img id="2" src="2.jpg"  />
            <img id="3" src="3.jpg"/>
        </div>
        <script>
            $(function () {
                var toplamResim = 3;
                var gecerliResim = 0;
                setInterval(function () {
                    gecerliResim++;
                    $('#slider img').hide();
                    $('#' + gecerliResim).show();                
                    if (gecerliResim == toplamResim) {
                        gecerliResim = 0;                   
                    }
                    
                }, 1000);
            })
        </script>
    </body>
    </html>

     

    alattin alattin (16984)
    7 yıl önce cevaplandı

    • Abi genede sağol ama slider var zaten bende :D kutlugalp 7 yıl önce
    • Benim yapmak istediğimi tam anlatamadım sanırım :) Abi kare bir div düşün onun içinde 3 tane resim sırayla gösterilecek. Slider gibi karmaşık şey değil yani Jquery de tıklayınca başka bir css'e geçiş yapabiliyorsak benim istediğimde bun tıklamadan süre ile yapmak ama bir türlü beceremedim. Yukardaki kodları inceledim googlede aradım bir türlü düzgün bir kod bulup'da çalıştıramadım. kutlugalp 7 yıl önce
    • @kutlugalp animated gif yap :) şimdi bir şeyler ilave ettim cevabıma alattin 7 yıl önce
    • Kodlar çok güzel çalışıyor hemde tam istediğim gibi olmuş eline sağlık. Gif'de güzel bir fikir aslında :D kutlugalp 7 yıl önce
    • sadece böyle bir işleme ihtiyaç duyuyorsan, 256 renk altı renge sahip görseller kullanıyorsan Gif olur @kutlugalp alattin 7 yıl önce
    • 256 renk altı renk naslı oluyor anlamadım ama :D çözünürlükle alakalı bir şey mi. mesela 4k resim olurmu? @alattin kutlugalp 7 yıl önce
    üyelik gerektirir

    Cevap yazabilmek için üye girişi yapmalısınız.

    Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
    uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol