VSEpodrad.ru

<link rel="stylesheet" href="/css/slider.css" type="text/css" media="screen" />  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  var currentPosition = 0;  
  var slideWidth = 560;  
  var slides = $('.slide');  
  var numberOfSlides = slides.length;  
  // Remove scrollbar in JS  
  $('#slidesContainer').css('overflow', 'hidden');  
  // Wrap all .slides with #slideInner div  
  slides  
  .wrapAll('<div id="slideInner"></div>')  
  // Float left to display horizontally, readjust .slides width  
  .css({  
'float' : 'left',  
'width' : slideWidth  
  });  
  // Set #slideInner width equal to total width of all slides  
  $('#slideInner').css('width', slideWidth * numberOfSlides);  
  // Insert controls in the DOM  
  $('#slideshow')  
  .prepend('<span class="control" id="leftControl">Clicking moves left</span>')  
  .append('<span class="control" id="rightControl">Clicking moves right</span>');  
  // Hide left arrow control on first load  
  manageControls(currentPosition)  
  // Create event listeners for .controls clicks  
  $('.control')  
  .bind('click', function(){  
  // Determine new position  
  currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;  
  // Hide / show controls  
  manageControls(currentPosition);  
  // Move slideInner using margin-left  
  $('#slideInner').animate({  
'marginLeft' : slideWidth*(-currentPosition)  
  });  
  });  
  // manageControls: Hides and Shows controls depending on currentPosition  
  function manageControls(position){  
  // Hide left arrow if position is first slide  
  if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }  
  // Hide right arrow if position is last slide  
  if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }  
  }  
});  
</script>  
<div id="slideshow">  
<div id="slidesContainer">  
<div class="slide">  
<h2>Заголовок 1</h2>  


<a href="http://sevensoft.3dn.ru/">  
<img class="ico" src="/images/logo.jpg" width="110" width="110" /></a>  
текст  
</p>  
</div>  
<div class="slide">  
<h2>Заголовок 2</h2>  


<a href="http://sevensoft.3dn.ru/">  
<img class="ico" src="/images/logo.jpg" width="110" width="110" /></a>  
текст  
</p>  


  
</div>  
<div class="slide">  
<h2>Заголовок 3</h2>  


<a href="http://sevensoft.3dn.ru/">  
<img class="ico" src="/images/logo.jpg" width="110" width="110" /></a>  
текст  
</div>  
<div class="slide">  
<h2>SevenSoft.3dn.ru</h2>  


<a href="http://sevensoft.3dn.ru/">  
<img class="ico" src="/images/logo.jpg" width="110" width="110" /></a>  
Вот такой вот слайдер  
</div>  
</div>  
</div>