scrollTo example


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <head>
  2. <meta content="">
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  4. <script type="text/javascript" src="jquery.scrollTo.js"></script>
  5. <script type="text/javascript">
  6.  
  7.  
  8. $(function(){
  9.  
  10. var sc = {};
  11. sc.container = jQuery(".news-container");
  12. sc.items = $("#newslist li");
  13. sc.cle = 1;
  14. sc.timer = null;
  15.  
  16. sc.scrollTimed = function(){
  17.  
  18. sc.container.scrollTo(sc.items[sc.cle], 600);
  19. sc.cle == sc.items.length -1 ? sc.cle = 0 : sc.cle++;
  20.  
  21. };
  22.  
  23. sc.start = function(){
  24. sc.timer = setInterval(function(){sc.scrollTimed()}, 2000);
  25. };
  26.  
  27. sc.stop = function(){
  28. clearInterval(sc.timer);
  29. };
  30.  
  31. sc.container.mouseover(function(){sc.stop();}).mouseout(function(){sc.start()});
  32.  
  33. sc.start();
  34.  
  35. });
  36.  
  37.  
  38.  
  39. </script>
  40. .news-container{ height: 195px; overflow: hidden; width: 351px;}
  41. </style>
  42. </head>
  43. <body>
  44. <div class="news-container">
  45. <ul id="newslist" class="news_list">
  46. <li>
  47. <h3><a href="/news/show/id/12">Ouverture du site web</a></h3>
  48. <p>Mise en ligne du site internet www.orchestre-symphonique-orleans.com</p>
  49. </li>
  50. <li>
  51. <h3><a href="/news/show/id/14">Ouverture de la saison</a></h3>
  52. <p>Ouverture de la saison « les 9e Symphonies à Orléans… »</p>
  53. </li>
  54. <li>
  55. <h3><a href="/news/show/id/16">Conférence sur les 9e Symphonies</a></h3>
  56. <p>Réalisé par Gildas Harnois vendredi 5 mars 2010 à 18h au Forum de la Fnac – entrée libre.</p>
  57. </li>
  58. <li>
  59. <h3><a href="/news/show/id/67">Concert à Saint-Malo</a></h3>
  60. <p>L’orchestre Symphonique d’Orléans en concert à l’Auditorium du Grand Large de St Malo le vendredi 30 avril 2010 à 20h30</p>
  61. </li>
  62. <li>
  63. <h3><a href="/news/show/id/71">Concerts complets</a></h3>
  64. <p>Les 9 et 10 janvier, les concerts seront donnés à guichets fermés</p>
  65. </li>
  66. </ul>
  67. </div>
  68. </body>
  69. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.