Слайдер

by Евгений

HTML

<div class="slider" id="slider">
  	
	<div class="sliderContent">
      	<div class="item" style="background-color: green;">
			
		</div>
		<div class="item" style="background-color: red;">
			
		</div>
		<div class="item" style="background-color: yellow;">
			
		</div>
		<div class="item" style="background-color: black;">
			
		</div>					
	</div>
  <div class="prev">&lt;</div><div class="next">&gt;</div>
</div>

CSS

.slider {
      width: 600px;
      height: 200px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
      font-family: tahoma;
    }
    .slider .prev {
      -webkit-transition: opacity 0.2s linear;
      -moz-transition: opacity 0.2s linear;
      -ms-transition: opacity 0.2s linear;
      -o-transition: opacity 0.2s linear;
      transition:opacity 0.2s linear;
      position:absolute;
      top: 50%;
      left: 10px;
      margin-top: -12px;
      background-color: #dadada;
      font-size: 16px;
      line-height: 10px; 
      border-radius: 150px;
      padding: 5px;
      cursor: pointer;
      opacity: 0;
    }
    .slider .next {
      -webkit-transition: opacity 0.2s linear;
      -moz-transition: opacity 0.2s linear;
      -ms-transition: opacity 0.2s linear;
      -o-transition: opacity 0.2s linear;
      transition:opacity 0.2s linear;
      position:absolute;
      top: 50%;
      right: 10px;
      margin-top: -12px;
      background-color: #dadada;
      font-size: 16px;
      line-height: 10px; 
      border-radius: 150px;
      padding: 5px;
      cursor: pointer;
      opacity: 0;
    }
    .slider:hover .prev, .slider:hover .next{
      opacity: 1;
      display: block;
    }
    .slider .item {
      width: 600px;
      height: 200px;
      position: absolute;
      display: none;
      opacity: 0;
    }

JavaScript

function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
                                       ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
    
  }
  if ( [].indexOf ) { 
    
    var find = function(array, value) {
      return array.indexOf(value);
    }
    
    } else {
      var find = function(array, value) {
        for(var i=0; i<array.length; i++) {
          if (array[i] === value) return i;
        }
        
        return -1;
      }
      
      }

  var fix1 = [],fix2 = [];
  
  function ops (r,elm,speed) {
    var sp = speed/25,
      o  = isNaN(parseInt(elm.style.opacity))
      ? (r == "open") ? 0 : 1
      : parseInt(elm.style.opacity);
    
    var m = find(fix1, elm)
    var l = m == -1 ? true : false;
    
    if (l)
    	fix1[fix1.length] = elm;
    else 
    	clearTimeout(fix2[m])
    
    elm.style.opacity = o;
    elm.style.display = "block";
    function rec (){
      if (r == "open")o = (o*100 + 0.05*100)/100;
      if (r == "close")o = (o*100 - 0.05*100)/100;
      
      if (o<0){ o = 0; elm.style.display = "none"};
      if (o>1) o = 1;
      
      elm.style.opacity = o;
      
      var l = find(fix1, elm);
      	  if (l == -1) l = fix2.length;
      
      if (o>0 && o<1)
        fix2[l] = setTimeout(rec,sp);
      else
        delete fix2[l];
    }
    rec ()
  }
  function handleMouseLeave(handler) {
    return function(e) {
      e = e || event;
      var toElement = e.relatedTarget || e.toElement;
      while (toElement && toElement !== this) {
        toElement = toElement.parentNode;
      }
      if (toElement == this) {
        return;
      }
      return handler.call(this, e);
    };
  }
  function handleMouseEnter(handler) {
    
    return function(e) {
      e = e || event;
      var toElement = e.relatedTarget || e.srcElement;
      while (toElement && toElement !== this) {
       ...