Nutikas liugur 3 - kuidas lisada kohandatud fonte

I'm looking to reduce the footprint of my Strict html 4.01 front page. One possible way is to combine much of the 'upcoming events' into a single small box, and have them automagically switch which one is displayed every few seconds. I'm sure there are a bunch of this kind of thing written already, and surely an open source one exists, but I haven't had much luck find one.

I'd prefer javascript to jQuery as installing jQuery might not be an option, but if the best-fit script requires jQuery I'd certainly be willing to investigate that route.

If it can display content from Wordpress that would be ideal.

This is a really simple task for jQuery - there are some concerns (i.e. variable slideshow slides) that aren't easy to solve in basic Javascript, so I would stick with a framework... preferably whichever framework is already in use at your site.

Example:

<?php  <html> <head> <title>Slideshow</title> <style type='text/css'> div.slide, div#slideshow { height:240px; width:340px; padding:2px 8px; overflow:hidden; } div.slide { display:none; } div#slideshow { border:dashed 1px #C0C0C0; } div#slide0 { display:block; } </style> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> <script type='text/javascript'> // Configuration: Set time out interval in seconds var slideTimeout = 5; // EOF_Configuration var showTimerID = 0; var slidePointer = -1; var slides = new Array(); function advanceSlide() { var lastSlide = slidePointer; if ( slidePointer >= (slides.length - 1) ) { slidePointer = 0; } else { slidePointer++; } var nextSlide = slidePointer; $('div#'+slides[lastSlide]).fadeOut(); $('div#'+slides[nextSlide]).fadeIn(); showTimerID = setTimeout( 'advanceSlide()', slideTimeout * 1000 ); } function registerSlide( slideNo ) { slides.push( slideNo ); } function stopShow() { if ( showTimerID ) { clearTimeout(showTimerID); } } $(document).ready(function() { if ( $('div.slide').length ) { $('div.slide').each(function() { registerSlide( $(this).attr('id') ); }); $('div.slide').bind( 'mouseenter', function() { stopShow(); }); $('div.slide').bind( 'mouseleave', function() { advanceSlide(); }); advanceSlide(); } }); </script>  <body> 

Näide slaidiseansi kohta

See leht näitab lihtsat ajastatud slaidiseanssi.

Slaid I

Teatud sellele slaidile omast sisu ...

II slaid

RÕIVA

III slaid

MAO
</body> ?> var13 ->
  • Kuidas ma slaidide vahel liiguksin? FREX, kui sooviksin igale slaidile tagasi / järgmist nuppu? Olen kogu selle jQuery asja suhtes veel üsna uus.
  • 1 Noh, peate edasi / tagasi toimingute jaoks lisama oma konsooli (kui jõuan jQuery ajaveebi koostamiseni, võib see olla hea kandidaat :), kuid lisasin pausi ja operatsioonide alustamiseks sündmused mouseEnter / mouseLeave ja jQuery on suurepärane dokumentatsioon: jquery.com

none: Charles Robertson | none