Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="description" content="açıklama" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var slider=0;
$.slider=function(toplam){
$("#slider ul#buton li").removeClass("aktif");
$("#slider ul#resim li").hide();
if(slider<toplam-1){
slider++;
$("#slider ul#buton li:eq("+slider+")").addClass("aktif");
$("#slider ul#resim li:eq("+slider+")").fadeIn("fast");
}else
{
$("#slider ul#buton li:first").addClass("aktif");
$("#slider ul#resim li:first").fadeIn("fast");
slider=0;
}
}
var toplamli=$("#slider ul#resim li").length;
/* güncellenen kısım */
for(var i=1;i<=toplamli;i++){
$("ul#buton ").append('<li><a href="">'+i+'</a></li>');
}
var interval= setInterval('$.slider('+toplamli+')',2000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval= setInterval('$.slider('+toplamli+')',2000);
});
$("#slider ul#buton li:first").addClass("aktif");
$("#slider ul#resim li").hide();
$("#slider ul#resim li:first").show();
$("#slider ul#buton li").click(function(){
var indis= $(this).index();
$("#slider ul#buton li").removeClass("aktif");
$(this).addClass("aktif");
$("#slider ul#resim li").hide();
$("#slider ul#resim li:eq("+indis+")").fadeIn("fast");
slider=indis;
return false
}
);
});
</script>
<style>
a { text-decoration:none}
ul,li{padding:0;margin:0; list-style-type:none;}
#slider{width:600px;height:240px;background-color:ccc;border:1px solid #ddd; position:relative;overflow:hidden;}
#slider ul li{ list-style-type:none;float:left;}
#slider ul#resim li a img{width:600px;height:240px;}
#slider ul#buton{ position:absolute;bottom:10px;left:10px;}
#slider ul#buton li{float:left}
#slider ul#buton li a{display:block;padding:3px 6px;color:#FFFFFF;margin-right:3px}
#slider ul#buton li.aktif a {background-color: rgb(20, 100, 173);
border: 1px solid #ddd;
border-radius: 5px;}
</style>
</head>
<body>
<div id="slider">
<ul id="resim">
<li><a href="#"><img src="Resim Adresi" /></a></li>
<li><a href="#"><img src="Resim Adresi" /></a></li>
<li><a href="#"><img src="Resim Adresi" /></a></li>
<li><a href="#"><img src="Resim Adresi" /></a></li>
</ul>
<ul id="buton">
</ul>
</div>
</body>
