Случайна ротация на съдържание с Javascript и Css

Първо скривате съдържанието с Css, след това го извеждате, като при това го въртите на случаен принцип със скрипта отдолу.

Шегичка за дизайнери: Знаете ли че?

• ... ако искате да сто по-добър уеб дизайнер трябва да ядете зеленчуци?
• ... за да напишете кода на една уеб страница отива повече време отколкото да изядете една пица?
• ... че трябва да валидирате кода си?
• ... jQuery е Наистина ваш приятел?
• ... каквото и да казват уеб дизайнерите, не можете да научите CSS за 3 часа?

Скрипта

Включете този скрип в хедъра: //3dwebdesign.org/js/jquery2.js и след него този джаваскрипт:

this.randomtip = function(){

  var pause = 3000; // пауза (в милисекунди) )
  var length = $("#tips li").length; 
  var temp = -1;    
 
  this.getRan = function(){
    // get the random number
    var ran = Math.floor(Math.random()*length) + 1;
    return ran;
  };
  this.show = function(){
    var ran = getRan();
    // to avoid repeating tips we need to check 
    while (ran == temp){
      ran = getRan();
    }; 
    temp = ran;
    $("#tips li").hide();  
    $("#tips li:nth-child(" + ran + ")").fadeIn("fast");    
  };
  // initiate the script and also set an interval
  show(); setInterval(show,pause);
  
};
 
$(document).ready(function(){  
  randomtip();
});

CSS

#tips, #tips li{margin:0;padding:0;list-style:none;}
#tips{width:250px;font-size:16px;line-height:120%;}
#tips li{
padding:20px;
background:#e1e1e1;
display:none; /* скрива списъка, вижда се само с javascript */}

Следваща Ajax и Javascript модули за новини през RSS