JQuery ile Kayan Resim

 bcakir
 16 Ekim 2011

Merhaba arkadaşlar bu yazımda JQuery ile resimlerinin gösterilmesi için kullanılabilecek slider yapmayı göstereceğim. Bir önceki JQuery kayan içerik uygulamamızdan daha farklı bir uygulama olacak. Uygulamamızda yine hazır bir kütüphane kullanacağım. Siz de isteklerinize göre kütüphaneleri kolayca internetten arayarak bulabilirsiniz. Genellikle hepsinin kullanılma yöntemi birbirine benziyor. Bu uygulamamızda ise sadece resimleri değiştirerek uygulamayı kolayca kendinize uyarlayabilirsiniz. Uygulamamızın çalışabilmesi için yine bazı dosyalara ihtiyacımız var. Bundan dolayı da yazımızın sonunda uygulamamızın çalışır halini yine sizlere vereceğim. Şimdi uygulamamızı yapmaya başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>JQuery ile Kayan Resim</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#slider").easySlider({
        auto: false,
        continuous: true
    });
});
</script>
</head>
<body>
<div id="container">
<div id="header"><h1>Kayan Resim Slider</h1></div>
<div id="content">
<div id="slider"><ul>
            <li><img src="images/water.jpg" alt="Slide One" /></li>
            <li><img src="images/hills.jpg" alt="Slide Two" /></li>
            <li><img src="images/park.jpg" alt="Slide Three" /></li>
        </ul></div>
</div>
</body>
</html>

Hazır kütüphane kullanarak uygulamamızı yukarıda çok az kod ile geliştirdik. Siz isterseniz resim sayısını artırma, otomatik deiğer resime geçme gibi kendinize göre küçük değişiklikler yapabilirsiniz. Uygulamanın çalışan, zipli halini buradan indirebilirsiniz. Böylece bir uygulamamızın daha sonuna gelmiş olduk. Yararlı bir uygulama olması dileğiyle.

 8.142 Okunma

Bu yazıya 8 yorum yapılmış.

  1. elinize sağlık, küçük ama işlevsel bir çalışma : ))

  2. çalışan halini zipli indirdik çalışmıyor.

    • Bunu yazmaktan pek hoşlanmıyorum ama yine yazmam gerekti; uygulamada sorun yok çalışıyor, şimdi de denedim yine çalıştı. Bilgisayarına indirip klasöre çıkarınca index.html dosyasını çalıştırıyorsun, bütün işlem bu kadar.

  3. ck güzel bi paylasım, ancak bi sorum daha olacak, resimler ayrı ayrı link verebiliyor muyuz nasıl yapabiliriz acaba?

    • li etiketinin içinde, a href şeklinde her bir resmi anchor etiketine alacaksın. Örnek yazamıyorum çünkü yazdığım örnek linke dönüşüyor.

  4. kendi otomatik kaysaymış iyiymiş 🙂

  5. Uygulama çok kullanışlı oldu geliştirdim baya fakat çözemediğim bir yer var li tagları içerisindeki nesneler dikey harekette yukarı çıkıyor yatay harekette sola kayıyor bunu tam tersini uygulamak istiyorum.. yardımcı olabilirseniz çok sevinirim.. İlginiz için teşekkürler.. 🙂

  6. explorer da neden dağıtıyor resimleri, acil cevap atabilir misin?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat