Ротатор

by Евгений

HTML

<div id="rotator">
    <div class="rotate red"></div>
    <div class="rotate orange"></div>
    <div class="rotate yellow"></div>
    <div class="rotate blue"></div>
</div>

<div id="slider">
    <div class="slide red"></div>
    <div class="slide orange"></div>
    <div class="slide yellow"></div>
    <div class="slide blue"></div>
</div>

CSS

.rotate,
.slide {
    width: 100px;
    height: 100px;
    position: absolute;
}
.red {
    background: red;
}
.orange {
    background: orange;
}
.yellow {
    background: yellow;
}
.blue {
    background: blue;
}
#rotator,
#slider {
    width: 100px;
    height: 100px;
    margin: 20px;
    position: relative;
    overflow: hide;
}

.slide{
display: none;
}
.slide.active{
  display: block;
}

JavaScript

function theRotator() {
  $('div#rotator div').css({opacity: 0.0});
  $('div#rotator div:first').css({opacity: 1.0});
  setInterval('rotate()',3000);
}
 
function rotate() {  
  var current = ($('div#rotator div.show')? $('div#rotator div.show') : $('div#rotator div:first'));
  var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator div:first') :current.next()) : $('div#rotator div:first'));  
  next.css({opacity: 0.0})
  .addClass('show')
  .animate({opacity: 1.0}, 1000);
  current.animate({opacity: 0.0}, 1000)
  .removeClass('show');
};


window.onload = function () {
theRotator();// верхний слайдер

// нижний слайдер    
  var slide = document.querySelectorAll('.slide'), len = slide.length, i = len-1;
  (function go()
  {
     slide[i].classList.remove('active')
     i = ++i % len;
     slide[i].classList.add('active');
     window.setTimeout(go, 1000)
  })()
}