<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<style>
#slider{ /* Оболочка слайдера */
width:1540px;
height:360px;
overflow: hidden;
position:relative;}
.slide{ /* Слайд */
width:640px;
height:360px!important;
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;}
</style>
<script>
(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).hide(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).show(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);
</script>
<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>
</body>
</html>
IgorArhangel, fadeIn/fadeOut не подходит
нужны обычные show/hide c фиксированной высотой слайда
.slide{ height:360px!important;