[IgorArhangel]

Кое что сделал. Но все же работает еще не так...
Загвоздка именно на javascript
вот собственно он

(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;
$(document).ready(function(e) {
	//$('.slide').css(
	//	{"left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		$(".control-slide.active").removeClass("active");
		$('.control-slide').eq(slideNum).addClass('active');
		}

	var $adderSpan = '';
	$('.slide').each(function(index) {
			$adderSpan += '<span class = "control-slide">' + index + '</span>';
		});
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
			if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-wrap').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});
})(jQuery);

HTML разметка

<div id="slider-wrap">
  <div id="slider">
    <div class="slide">
      <img src="img/1.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/2.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/3.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/4.png" width="640" height="360">
    </div>
  </div>
</div>

И файл стилей

#slider{ /* Оболочка слайдера */
	width:1540px;
	height:360px;
	overflow: hidden;
	position:relative;}
.slide{ /* Слайд */
	width:640px;
	height:360px;
	float:left;
	margin:0 -85px 0 0;
	}
.sli-links{ /* Кнопки смены слайдов */
	margin-top:10px;
	text-align:center;}
.sli-links .control-slide{
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
	cursor:pointer;
	background-position:center center;}
.sli-links .control-slide.active{
	background-position:center top;}

Сначала у меня все нормально. они выстраиваются, но когда начинается анимация происходит все не так.
У меня в каком-то месте цикл не правильно работает.
И еще мне хочется чтоб они по кругу шли. Я знаю что есть скрипт circle но не понимаю как его использовать. буду очень признателен если кто-то чего-то посоветует или подскажет

Вот то как работает
http://207693.artzozul.web.hosting-test.net/