![BLACK WEEK IT! [Zgarnij książkę GRATIS lub kupuj solo z rabatem do -50%]](https://static01.helion.com.pl/helion/img/promocje/xzay/box_1180x419_1x_druk__Black_week_2_zestawy_2024_Rpolony_a0d7b42e2-z1.png)
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: 0
Ranga: Administrator serwisu Punktów: 0
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
