![Weso³ych¦wi±t ;]](http://funkcje.net/images/logo_easter.jpg){kind=logo}
![Światowy dzień książki... IT! [Książki drukowane -40%| Ebooki -50%]](https://static01.helion.com.pl/helion/img/promocje/bannery/19098/box_1180x419_6x_druk_Helion_swiatowy_dzien_ksiazki_Rpolony_054b5475a.jpg)
Przewijana galeria obrazków JavaScript (QScroller)
Skrypt Javascript wyświetla galerię która umożliwia przewijanie obrazków w bardzo atrakcyjny sposób.
Na początek pobierzemy biblioteke QScroller : [ pobierz ]
Poniżej przedstawiam przykładowy kod korzystający z tej biblioteki używa on 3 obrazków :
product1, product2, product3 , ale w samej paczce są już gotowe przykłady.
Skrypt jest banalnie prosty w modyfikacji i na pewno uatrakcyjni waszą witrynę.
Listing
<html>
<head>
<link href="qscroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="qscroller.js"></script>
</head>
<body>
<div id="qscroller2" class="qscroller"></div>
<div class="qscroller2-nav">
<div>
<a id="go-prev" href="javascript:void(0)"><<</a>
<a id="go-next" href="javascript:void(0)">>></a>
</div>
</div>
<div class="hide">
<div class="qslide2">
<img src="images/product1.jpg" alt="" />
<h1>Product1</h1>Simple example of product showcase. Use arrows at the bottom to scroll.
</div>
<div class="qslide2">
<img src="images/product2.jpg" alt="" />
<h1>Product2</h1>Product description here.
</div>
<div class="qslide2">
<img src="images/product3.jpg" alt="" />
<h1>Product3</h1>Product description here.
</div>
</div>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'qslide2',
duration: 1500,
buttons: {next:'go-next',prev:'go-prev'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('qscroller2',opt);
scroller.load();
});
//-->
</script>
<h2> </h2>
</body>
</html>
Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
-
-
Tre¶æ komentarza
-
:: Losowe artykuły
:: Wymiana linków
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno
