post icon

Javascript scroll items like Flash with jCarousel library

Per gli amanti del JavaScript con effetti molto simili al Flash esistono dei package JS e CSS che consentono di fare molto stile fashion. Una di queste librerie fashion è jCarousel Library, che mette a disposizione effetti sullo scroll di elementi in lista, come immagini, testi, links, ecc., sia per uno scroll verticale per uno scroll orizzontale.
Lo snippet seguente aggiunge un effetto flash mediante JavaScript ad una lista di immagini, in pratica un adrotator simil-flash.

Per vedere l’esempio fai click qui

<!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" xml:lang="en-us">
<head>
    <title>Javascript scroll items like Flash with jCarousel library</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!-- jQuery library -->
    <script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
    <!-- jCarousel library -->
    <script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
    <!-- jCarousel core stylesheet -->
    <link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
    <!-- jCarousel skin stylesheet -->
    <link rel="stylesheet" type="text/css" href="skin.css" />

    <script type="text/javascript">

    jQuery(document).ready(function() {
            jQuery('#mycarousel').jcarousel();
    });
    </script>
</head>
<body>

<div id="wrap">

<h1>jCarousel Example</h1>


<ul id="mycarousel" class="jcarousel-skin-tango">

<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" /></li>

  </ul>

</div>

</body>
</html>

Download source: Scroll_Items_Like_Flash_with_JS.zip (30,60 kb)

5 marzo 2009 @ 14:02

No comments yet.

Leave a comment

Leave a Reply

Are you human? Time limit is exhausted. Please reload CAPTCHA.