THİS HTML KOD
<div class = "kayar kap1">
<Style>
#slider {positon: göreli; kenar boşluğu: 0 otomatik; genişlik:% 100; yükseklik: 250 piksel; taşma: gizli;}
#slider img {genişlik:% 100; yükseklik: 250 piksel;}
#slider li {list-style: none;}
.sliderbutton {position: göreli; kenar boşluğu: 0 otomatik; genişlik: 120px; kenar boşluğu üstü: -25px;}
.sliderbutton li {list-stili: yok; dolgu: 5px; arka plan: kırmızı; float: sol; marj-sağ: 10px; border-radius: 10px;}
.sliderleft {imleç: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 250 piksel, çizgi-yüksekliği: 270px;}
.sliderright {kenar sol: 652px; imleci: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 250 piksel, çizgi-yüksekliği: 270px;}
</ Style>
<Script>
$ (Document) .ready (function () {
var kaydırıcı = 0;
$('.sliderbutton li:first').css('background','yellow');
$.slider = function(toplam){
$('#slider li').hide();
if(slider < toplam-1)
{
slider++;
$('.sliderbutton li').css('background','red');
$('.sliderbutton li:eq('+slider+')').css('background','yellow');
$('#slider li:eq('+slider+')').fadeIn("fast");
}else if(slider < 0){
slider = toplam-1;
$('.sliderbutton li').css('background','red');
$('.sliderbutton li:eq('+slider+')').css('background','yellow');
$('#slider li:eq('+slider+')').fadeIn("fast");
}else{
$('#slider li:first').fadeIn("fast");
slider=0;
$('.sliderbutton li').css('background','red');
$('.sliderbutton li:eq('+slider+')').css('background','yellow');
}
}
var lenghtli = $('#slider li').length;
var interval = setInterval('$.slider('+lenghtli+')',3000);
$('#slider').hover(function(){
interval = clearInterval(interval);
},function(){
interval = setInterval('$.slider('+lenghtli+')',3000);
})
$('.sliderbutton li').click(function(){
$('.sliderbutton li').css('background','red');
$(this).css('background','yellow');
interval = clearInterval(interval);
var indis = $(this).index();
$('#slider li').hide();
$('#slider li:eq('+indis+')').fadeIn("fast");
slider = indis;
interval = setInterval('$.slider('+lenghtli+')',3000);
});
$('.sliderleft').click(function () {
slider--;
$('.sliderbutton li').css('background','red');
if(slider < 0)
{
$('.sliderbutton li:last').css('background','yellow');
slider = lenghtli-1;
}else{
$('.sliderbutton li:eq('+slider+')').css('background','yellow');
}
$('#slider li').hide();
$('#slider li:eq('+slider+')').fadeIn("fast");
});
$('.sliderright').click(function () {
slider++;
$('.sliderbutton li').css('background','red');
if(slider > lenghtli-1)
{
$('.sliderbutton li:first').css('background','yellow');
slider = 0;
}else{
$('.sliderbutton li:eq('+slider+')').css('background','yellow');
}
$('#slider li').hide();
$('#slider li:eq('+slider+')').fadeIn("fast");
});
});
</ Script>
</ Head>
<Body>
<div id = "kayar kapak">
<div class = "font1">
<div class = "sliderleft"> SOL </ div>
<div class = "sliderright"> SAĞ </ div>
</ Div>
<li> <img src = "! Anasayfa / cipsi.jpg" alt = ""> </a> </ li>
<li> <img src = "! Anasayfa / 1.jpeg" width = "100px" alt = ""> </ li>
<li> <img src = "! Anasayfa / kirmiz.jpg" alt = ""> </ li>
<li> <img src = "! Anasayfa / pancar.jpg" alt = ""> </ li>
</ Div>
<div class = "kayar kapak düğmesi">
<Li> </ li>
<Li> </ li>
<Li> </ li>
<Li> </ li>
</ Div>
</ Div>
CSS KOD:
#slider {genişlik: otomatik; yükseklik: 400 piksel; taşma: gizlenmiş;}
#slider li {list-style: none;}
.sliderbutton {position: göreli; kenar boşluğu: 0 otomatik; genişlik: 120px; kenar boşluğu üstü: -25px;}
.sliderbutton li {list-stili: yok; dolgu: 5px; arka plan: kırmızı; float: sol; marj-sağ: 10px; border-radius: 10px;}
.sliderleft {imleç: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 400 piksel, çizgi-yüksekliği: 400 piksel;}
.sliderright {kenar sol: 900px; imleci: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 400 piksel, çizgi-yüksekliği: 400 piksel;}