Html Slider

Merhabalar bu gün Html ve JQERY (java) ile basit bir slider hazırladım islenilen yerde kullanılabilir lakin benim kullandığım gibi sayfanın başında tutarsanız slideri o zaman css kodları ile uğraşmanıza gerek kalmayacaktır.

Kodlar İndir.

 index.html
<!doctype html><html><head><meta charset="utf-8">
<title>Başlıksız Belge</title>
<link href="include/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="include/slider.js" type="text/javascript"></script>
<script src="include/jquery-3.3.1.min.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<table width="800" height="400" border="0" align="center">
<tr>
    <td><img src="" width="800" id="resim-galerisi" height="400" alt="" />
<input type="image" onClick="geri_button()" onMouseOver="geributonhover()" onMouseOut="geributondefault()" src="butonlar/geributonu.png"id="geributonu"  width="40" class="ileri_geributonlari" title="Geri" onMouseOut="geriibutondefault()" value="Geri"/>
 
<input type="image" onClick="ileri_button()" onMouseOver="ileributonhover()" onMouseOut="ileributondefault()" src="butonlar/ileributonu.png"id="ileributonu"  width="40" class="ileri_geributonlari" title="İleri" onMouseOut="ileriibutondefault()" value="İleri"/>

       <div class="onizleme_butonları">
        <center>
       <input type="image" id="1" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
        <input type="image" id="2" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
        <input type="image" id="3" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
        <input type="image" id="4" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" /> 
        <input type="image" id="5" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
        <input type="image" id="6" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
        <input type="image" id="7" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
        <input type="image" id="8" class="onizleme_butonu" style="border-radius:50%;" src="butonlar/dugme.png" width="20" />
         </center>
</div>
</td></tr>
</table>
</body>
</html>

<!doctype html><html><head><meta charset="utf-8">
<title>Başlıksız Belge</title>
<link href="include/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="include/slider.js" type="text/javascript"></script>
<script src="include/jquery-3.3.1.min.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<table width="800" height="400" border="0" align="center">
<tr>
    <td><img src="" width="800" id="resim-galerisi" height="400" alt="" />
<input type="image" onClick="geri_button()" onMouseOver="geributonhover()" onMouseOut="geributondefault()" src="butonlar/geributonu.png"id="geributonu"  width="40" class="ileri_geributonlari" title="Geri" onMouseOut="geriibutondefault()" value="Geri"/>
 
<input type="image" onClick="ileri_button()" onMouseOver="ileributonhover()" onMouseOut="ileributondefault()" src="butonlar/ileributonu.png"id="ileributonu"  width="40" class="ileri_geributonlari" title="İleri" onMouseOut="ileriibutondefault()" value="İleri"/>

 slider.js
var a = 0;
 setInterval(function(){
 a++;
 if(a == 9){a = 1;}
 var resim = "resimler/"+a+".jpg";
 $("#resim-galerisi").attr('src',resim);
 $(".onizleme_butonu").css('background','#555');
 $("#"+a).css('background','#ff6060');
 },2000);
 
 function geri_button(){
 a--; if((a == 0) || (a == -1)){a = 8;} 
 var resim = "resimler/"+a + ".jpg";
 $("#resim-galerisi").attr('src' , resim);
  $(".onizleme_butonu").css('background','#555');
 $("#"+a).css('background','#ff6060');} 
 
 function ileri_button(){
 a++; if(a == 9){a = 1;}
  var resim = "resimler/"+a + ".jpg";
 $("#resim-galerisi").attr('src' , resim);
  $(".onizleme_butonu").css('background','#555');
 $("#"+a).css('background','#ff6060');}
 
 function geributonhover(){$("#geributonu").attr('src','butonlar/geributonuhover.png');}
 function geributondefault(){$("#geributonu").attr('src','butonlar/geributonu.png');}
 function ileributonhover(){$("#ileributonu").attr('src','butonlar/ileributonuhover.png');}
 function ileributondefault(){$("#ileributonu").attr('src','butonlar/ileributonu.png');}

 style.css
@charset "utf-8";
.ileri_geributonlari {
 position:absolute;
 top:35%;
 transition:all 0.5s;
}
#ileributonu{
 right:22%;
 }
#ileributonu:hover{
 right:20.5%;
 }
#geributonu{
 left:22%;
 }
#geributonu:hover{
 left:20.5%;
 }
#resim-galerisi{
 border-radius:15px;
 }
 .onizleme_butonları{
  position:absolute;
  right: 44%;
  top:60%;}
  .onizleme_butonu{
   transition:all 0.5s;}

Html Slider

İletişim Formu