Return to Snippet

Revision: 22848
at January 24, 2010 11:52 by rccc


Initial Code
<html>
  <head>
    <title></title>
    <meta content="">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.scrollTo.js"></script>	
    <script type="text/javascript">
    
    
    $(function(){
    
	var sc = {};
	sc.container = jQuery(".news-container");
	sc.items = $("#newslist li");
	sc.cle = 1;  
	sc.timer = null;
	
	sc.scrollTimed = function(){ 
	  
	  sc.container.scrollTo(sc.items[sc.cle], 600);
	  sc.cle == sc.items.length -1 ? sc.cle = 0 : sc.cle++;
	  
	};
	
	sc.start = function(){
	  sc.timer = setInterval(function(){sc.scrollTimed()}, 2000);
	};
	
	sc.stop = function(){
	  clearInterval(sc.timer);
	};
	
	sc.container.mouseover(function(){sc.stop();}).mouseout(function(){sc.start()});

	sc.start();
	
     });
     

      
    </script>
    <style>
    .news-container{ height: 195px; overflow: hidden; width: 351px;}
    </style>
  </head>
  <body>
  <div class="news-container">
    <ul id="newslist" class="news_list">
	<li>
	    <h3><a href="/news/show/id/12">Ouverture du site web</a></h3>
	    <p>Mise en ligne du site internet www.orchestre-symphonique-orleans.com</p>
	</li>
	<li>
	    <h3><a href="/news/show/id/14">Ouverture de la saison</a></h3>
	    <p>Ouverture de la saison « les 9e Symphonies à Orléans… »</p>
	</li>
	<li>
	    <h3><a href="/news/show/id/16">Conférence sur les 9e Symphonies</a></h3>
	    <p>Réalisé par Gildas Harnois vendredi 5 mars 2010 à 18h au Forum de la Fnac – entrée libre.</p>
	</li>
	<li>
	    <h3><a href="/news/show/id/67">Concert à Saint-Malo</a></h3>
	    <p>L’orchestre Symphonique d’Orléans en concert à l’Auditorium du Grand Large de St Malo le vendredi 30 avril 2010 à 20h30</p>
	</li>
	<li>
	    <h3><a href="/news/show/id/71">Concerts complets</a></h3>
	    <p>Les 9 et 10 janvier, les concerts seront donnés à guichets fermés</p>
	</li>
    </ul>        
  </div>
</body>
</html>

Initial URL

                                

Initial Description

                                

Initial Title
scrollTo example

Initial Tags
jquery

Initial Language
HTML