Информер для сайта на jQuery

Материалы · В случайном порядке · Материалы: 1 · Колонки: 1

<h2>$TITLE$</h2>  
  <div>  
  <div class="scr"><a href="$ENTRY_URL$"><span style="color:#00BFFF;">$TITLE$</a></div>  
  <a href="$IMG_URL1$" rel="rr" onclick="return jsiBoxOpen(this)"><img src="$IMG_URL1$" style="width:200;height:160px;"></a>  
  <p>$MESSAGE$</p>  
  </div>

<script src="http://up-script.ru/Script/2/jquery.js" type="text/javascript"></script>  
  <script>  
  $(function() {  
  var current;  
  function rotate() {  
  if (current == 1) {  
  $("#block-1").removeClass().addClass("active");  
  $("#block-2").removeClass().addClass("non-active-top");  
  $("#block-3").removeClass().addClass("non-active-bottom");  
  } else if (current == 2) {  
  $("#block-1").removeClass().addClass("non-active-bottom");  
  $("#block-2").removeClass().addClass("active");  
  $("#block-3").removeClass().addClass("non-active-top");  
  } else {  
  $("#block-1").removeClass().addClass("non-active-top");  
  $("#block-2").removeClass().addClass("non-active-bottom");  
  $("#block-3").removeClass().addClass("active");  
  }  
  }  
  $("#rotator div").click(function() {  
  current = this.id.substr(6);  
  rotate();  
  });  
  });  
  </script>

#rotator { width: 820px; height: 200px; position: relative; padding: 0px; }  
  #block-1 { background: #222; border:1px solid #333;}  
  #block-2 { background: #222; border:1px solid #333;}  
  #block-3 { background: #222; border:1px solid #333;}  
  #rotator > div {position: absolute;overflow: hidden;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}  
  #rotator > div > div {padding: 0px;}  
  #rotator > div > div img {float: left;margin: 5 10px 2px 10px;border:1px solid #333;}  
  #rotator .active { top: 0px; left: 0px; width: 608px; height: 200px; }  
  #rotator .non-active-top { top: 0px; left: 615px; height: 96px; width: 205px; }  
  #rotator .non-active-bottom { top: 104px; left: 615px; height: 96px; width: 205px; }  
  #rotator .non-active-top:hover, #rotator .non-active-bottom:hover {cursor: pointer;-webkit-box-shadow: 0 0 10px #555;-moz-box-shadow: 0 0 10px #555;box-shadow: 0 0 10px #555;}  
  #rotator p {text-align: left;padding:0 10 0 10;}  
  #rotator .scr {padding:3 10 5 10;font-size:12px;color:#00BFFF;background:#333;}  
  #rotator h2 {text-align: center;line-height: 70px;font-size:12px;padding:5;}  
  #rotator .active h2 {display: none;}

<div id="rotator">  

  <div id="block-1" class="active">  
  $MYINF_X$  
  </div>  

  <div id="block-2" class="non-active-top">  
  $MYINF_X$  
  </div>  

  <div id="block-3" class="non-active-bottom">  
  $MYINF_X$  
  </div>  

  </div>