<ul class="genel">
<li>
<a href="#">MENÜ</a>
<ul class="menu">
<div class="icerik">Açilan Menü Içerigi</div>
</ul>
</li>

</ul>

<div id="sayfa">

<div id="dinamikalan">
<ul class="dinamikalan">
<li><a href="#"><img src="slider/1.png" alt=""/></a></li>
<li><a href="#"><img src="slider/2.png" alt=""/></a></li>
<li><a href="#"><img src="slider/3.png" alt=""/></a></li>
<li><a href="#"><img src="slider/4.png" alt=""/></a></li>
</ul>

<div class="sayfa_buton">
<a href="#" id="onceki"><img src="images/ok2.png" alt="" /></a>
<a href="#" id="sonraki"><img src="images/ok1.png" alt="" /></a>
</div>

</div>

body {font: 13px Helvetica; margin: auto; background-position: 50% 0; background-image:url('../images/background.jpg'); background-repeat:no-repeat;}
ul, li, ol, table, tr, td, h1, h2, h3, h4, h5, h6, p, form, input, select, textarea, button, img {padding: 0; margin: 0; border: 0; list-style: none}
a {text-decoration: none}
*:focus {outline: 0}
.clear {clear: both}

ul.genel {width: 1024px; height: 50px; margin: 0 auto; background-color : rgba(0, 0, 0, 0.5);}

ul.genel li {
display: block;
margin: 0 auto;

}

ul.genel li a{
padding: 22px 0 0 126px;
color: #fff;
display: block;
text-decoration: none;
width: 32px;
font-weight:bold;

}


ul.genel li span.subhover {background-position: center bottom; cursor: pointer;}

ul.genel li ul.menu {
list-style: none;
position: absolute;
left: 0; top: 50px;
background-color : rgba(0, 0, 0, 0.8);
margin: 0; padding: 0;
display: none;
float: left;
width: 100%;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
}

.icerik
{width: 1024px; height: 377px;
background-color : rgba(0, 0, 0, 0.1);
margin: 0 auto;
}

#sayfa {width: 1024px; height: 377px; position: relative; margin: 0 auto}

#dinamikalan {width: 1024px ;height: 377px; overflow: hidden;}
#dinamikalan ul li {width: 860px; height: 377px; overflow: hidden; margin: 0 auto}
.sayfa_buton {position: absolute; bottom: 120px; right: 0;}
.sayfa_buton a#onceki {margin-right: 954px }
.sayfa_buton a#sonraki {margin-right: 0 }

/////////////////////////// Üst Hızlı Menü Alanı ///////////////////////////

$(function(){

$("ul.menu").parent().append("<a></a>");

$("ul.genel li a").hover(function() {

$(this).parent().find("ul.menu").slideDown('slow') .show();

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.menu").slideUp('slow');
});

}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});

});

/////////////////////////// Slider Alanı ///////////////////////////


$(function(){
$(".sayfa a:first").addClass("aktif");
$("ul.dinamikalan li").hide();
$("ul.dinamikalan li:first").show();
var toplamLi = $("ul.dinamikalan li").length;
var deger = 0;

$(".sayfa a").click(function(){
var indis = $(this).index();
$("ul.dinamikalan li").hide();
$("ul.dinamikalan li:eq("+indis+")").fadeIn(500);
$(".dinamikalan a").removeClass("aktif");
$(this).addClass("aktif");
return false
});

$("a#sonraki").click(function(){
$(".sayfa a").removeClass("aktif");
$("ul.dinamikalan li").hide();
if (deger < toplamLi - 1){
deger++;
$("ul.dinamikalan li:eq("+deger+")").fadeIn(500);

$(".sayfa a:eq("+deger+")").addClass("aktif");
}else {
deger = 0;
$("ul.dinamikalan li:first").fadeIn(500);
$(".sayfa a:first").addClass("aktif");
}
return false
});

$("a#onceki").click(function(){
$(".sayfa a").removeClass("aktif");
$("ul.dinamikalan li").hide();
if (deger > 0){
deger--;
$("ul.dinamikalan li:eq("+deger+")").fadeIn(500);

$(".sayfa a:eq("+deger+")").addClass("aktif");
}else {
deger = toplamLi - 1;
$("ul.dinamikalan li:last").fadeIn(500);
$(".sayfa a:last").addClass("aktif");
}
return false
});

$dondur = function(){
$(".sayfa a").removeClass("aktif");
$("ul.dinamikalan li").hide();
if(deger < toplamLi - 1){
deger++;
$("ul.dinamikalan li:eq("+deger+")").fadeIn(500);
$(".sayfa a:eq("+deger+")").addClass("aktif");
}else {
deger = 0;
$("ul.dinamikalan li:first").fadeIn(500);
$(".sayfa a:first").addClass("aktif");
}
return false
}

var dinamikalanDondur = setInterval('$dondur()',5000);
$("#dinamikalan").hover(function(){
clearInterval(dinamikalanDondur);
}, function(){
dinamikalanDondur = setInterval('$dondur()',5000);
});

});