Tweet

İ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.[...]


CODE:
<!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.


Oguzz
oguz@thecoders.net
21 Eylul 2009 12:24

İlgili Olabilecek Makaleler


Yorumlar (0)




Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg