<div class="slider" oncontextmenu="return false">
<div class="spages"><div onclick="slider('eq(0)',this)" style="cursor:default;opacity:0.7">×</div></div>
<div class="stitle"><div></div><div class="spodtitle"></div></div>
<!-- Вводим картинки, которые будут в слайдере. В title пишем заголовок, в alt - подзаголовок, в url - ссылку на картинку, а в href - ссылку куда будет сделан переход при клике -->

<a href="/"><img src="url" title="Заголовок 1" alt="Подзаголовок 1"></a>
<a href="/"><img src="url" title="Заголовок 2" alt="Подзаголовок 2"></a>

<!-- Конец -->
</div>

/* Slider by ILyeS */
.slider{position:relative;width:600px;height:300px;background:#bbb;cursor:pointer;border:1px solid #000}
.spages{position:absolute;left:8px;top:10px}
.spages div{float:left;margin:0 2px;background:#222;width:25px;height:10px;border:1px solid #fff;border-radius:2px;opacity:0.3;text-align:center;color:#fff;font-size:7pt}
.spages div:hover{opacity:0.5}
.stitle{position:absolute;left:0;bottom:0;right:0;height:60px;background:#333;opacity:0.7;padding:10px;color:#fff;font-weight:700;font:20pt 'Palatino Linotype';text-shadow:0 1px #000;border-top:1px solid #000;cursor:default}
.spodtitle{font-size:12pt}
.slider img{width:600px;height:300px;border:0}

<script>
// Slider by ILyeS

// Автоматическое заполнение переключателей, исходя из колличества картинок
function sliderres(){
a=$('.slider').html().split('<img').length-2
if(a>0){for(i=1;i<=a;i++){$('.spages').append('<div onclick=slider("eq('+i+')",this)></div>');$('.slider img:eq('+i+')').attr("style","display:none")}}
$('.stitle div:eq(0)').html($('.slider img:eq(0)').attr('title'));$('.stitle div:eq(1)').html($('.slider img:eq(0)').attr('alt'))
}sliderres()

// Переключение картинки
function slider(a,b){
c=$('.slider img:'+a).attr('title')
d=$('.stitle div:eq(0)').html()

if(c!=d){
$('.spages div').attr("style","")
$(b).attr("style","cursor:default;opacity:0.7")
$('.spages div').html('')
$(b).html('×')

$('.stitle div:eq(0)').html(c)
$('.stitle div:eq(1)').html($('.slider img:'+a).attr('alt'))

$('.slider img').fadeOut(200)
$('.stitle').hide()
setTimeout(function(){$('.slider img:'+a).fadeIn(200)},200)
setTimeout(function(){$('.stitle').show()},400)
}}
</script>