JQuery Fade ile Galeri
2 Sayfa 1
JQuery sayesinde, çok çekici ve çok basit resim galerileri gerçekleştirmek için bu basit dersteki biz değil bir soldurma efekti kullanarak daha basit bir soldurma galeri veya görüntü sırası görünür bir galeri (yan) oluşturmak için nasıl göreceksiniz mümkündür hoş.
Bizim galerileri ulaşmak için herhangi bir eklenti kullanmayın, ancak jQuery sağlayan araçları akılcı kullanımı kendimizi sınırlayacaktır.
Biz niyetinde ne bir önizlemesini görebilirsiniz:
Biz HTML kodu inceleyelim:
<html>
<head>
JQuery ile bir slayt <title> galeri </ title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript" src="fadegallery.js"> </ script>
</ Merkez>
<body>
<div id="fadegallery"> </ p>
</ Body>
</ Html>
Biz bir DIV kimliği fadegallery atamak için sayfanın gövde, biz başlık ve dış stil sayfası, jQuery kütüphanesi ve kod aşağıdaki hangi dosya fadegallery.js arayın:
fonksiyonu show (x) {$ ("# img" + x) fadeIn ("yavaş");.}
$ (Belge). Hazır
(
function ()
{
$ ("# Fadegallery"). Sonra ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg";
img [1] = "pluto.jpg";
img [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
(i = 0; i <img.length; i + +)
{
$ ("# Fadegallery"). Append ("+ i + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ p>") ;
window.setTimeout ("gösterisi (" + i + ")", ((i + 1) * 1000));
}
}
);
Bu işlem basit: İlk olarak, sırayla bir dizideki tüm öğeleri ayıklar biz döngüsünde dinamik yapı çeşitli DIV görüntülemek için jQuery fadeIn işlevini çağıran bir parametreli fonksiyon (solmaya ile) oluşturmak, HTML görüntü ve sayfa düzenleri içerir.
Döngü içinde de sonuç zinciri oluşturmak için tam, ikinci gelen çalıştıran bir zamanlayıcı ve sırayla her adımda saniye daha da artarak göstergeler () hatırlıyorum.
Uyarıya dikkat edin:
$ ("# Fadegallery"). Sonra ("
");
() fonksiyonunun başında eklenen: Bu bizim galeri eve DIV altında yer alan herhangi bir içerik ilerlemek için tasarlanmıştır (çakışan öğelerin yokluğunda çünkü kullanan CSS şamandıra özelliği tatsız neden olabilir).
 |
CSS (Ders)
W3C CSS ve XHTML göre Web Tasarım ve Erişilebilirlik. 29 € dan başlayan fiyatlarla. |
 |
HTML (Ders)
29 € dan Web için biçimlendirme dili. |
 |
Javascript (Ders)
Istemci tarafı komut dosyası için kılavuz tamamlayın. En düşük € 39. |