İmage SlideShow

Anasayfa » JavaScript - Html » İmage SlideShow

İmage SlideShow

10 Nisan 2010 | Yazar: coders | Yorum Yok | 25 kez okundu

Selam arkadaşlar.Bu makalemizde sizlere basitce nasıl resimlerinizi slayt gösterisi yapabilirsiniz onu anlatacağım.Aşağıda yer alan örneğimizde sayfanıza dahil etmeniz gerekenleri ve ne işe yaradıklarına açıklama satılarlarında değindim.Jquery kütüphanesinden yararlanarak hoş bir slider oluşturduk.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

// ajax.googleapis.com daki jquery.min.js dosyamızı script type etiketimiz ile dahil ediyoruz..

<script type="text/javascript">

$('html').addClass('js');

$(document).ready( function() {

setInterval("switchSlide()", 4000);

});

function switchSlide() {

var slide = $("#slideshow .slide:first");

slide.hide();

$("#slideshow").append(slide);

slide.fadeIn(1500);

}

</script>

<style>

#tagline {width:332px; height:27px; overflow:hidden; margin:11px 0 0 0; position:relative; left:0;}  // 332 x 27 px olarak ayarladık.sol tarafta yer almasını istedik

#slideshow .slide {position: absolute;left:0;}

#slideshow .slide a, #slideshow .slide img{border:none;}

.js #slideshow .slide {display: none;}

</style>

// Style etiketi içerisinde slide gösterisindeki resimlerimizin boyutlandırma işlemini yapıyoruz ve sayfada görüneceği pozisyonu belirtiyoruz..

</head>

<body>

// div içerisinde css kodlarımızdaki slideshow u id olarak atayarak açacağımız class içerisinde resimlerimizi img src ile ekliyoruz..Link verebilirsiniz.

<div id="slideshow">

    <div class="slide">

        <a href="#"><img src="img1.jpg" height="" width="" alt=""></a>

    </div>

    <div class="slide">

        <a href="#"><img src="img2.jpg" height="" width="" alt=""></a>

    </div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</body>

</html>

Sayfalarınızda kullanabileceğiniz güzel bir slider.Umarım işinize yaramıştır.Kolay gelsin hepinize.

OĞUZ Kırat

Facebok'ta Paylaş

Benzer Yazılar

Sponsor Olmak İstiyorum!

Etiketler: cod, code, coder, coders, İmage SlideShow, Java kodlari, Javascript, JavaScript cozumleri, JavaScript Ders, JavaScript dersleri, JavaScript full download, JavaScript full indir, JavaScript haberleri, JavaScript hakkında, JavaScript hazir kodlar, JavaScript kodlari, JavaScript komutlari, JavaScript Menü Oluşturmak, JavaScript özellikler, JavaScript problemleri, JavaScript sorunlari, JavaScript Yapilari, JavaScript yazilimi, kod, kod yazma, kodlama, programlama, programlama dilleri, slayt show, SlideShow eklemek, SlideShow kodlari, SlideShow komutlari, system, system developers

Ahmet Ates

http://www.coders.gen.tr/ 25 yasindayim. Z.K.U Biyomedikal Cihaz Teknolojisi bölümünü okudum, Programlama dilleri arasindan ilgilendiğim ve profesyonel olarak hizmet verdiğim dil Fortran'dir. Web olarak Php,Css ve hazır sistemler olarak Wordpress ve Vbulletine hayranlık besliyorum.