Anasayfa » JavaScript - Html » İmage SlideShow

İmage SlideShow

10 Nisan 2010  |  Yazar: coders  |  Yorum Yok  |  25 kez okundu
Facebook'da Paylaş Twitter'da Paylas FriendFeed'de Paylaş İmage SlideShow

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/" 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/">

$('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/" 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

Etiketler: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
avatar

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.

Bu yazı hakkında birşeyler demek ister misiniz?

RSS üzerinden bu yazıya yapılan yorumları takip edin.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir.

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Programlama