Html Slider V2

Merhaba,
Bu gün html, css ve js ile daha fonksiyonlu orta düzeyde slider hazırladım.
Diğerinden farkı aktif butonlar olması, Gösterilen resmin başlığını ve linki bizlere vermesi.
Ayrıca geçişlerde birazda efekt ekledim Umarım sizlerde beğenirsiniz.
İndirmek için tıklayın.

 index.html
<!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" xml:lang="tr">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <script class='java' src='jquery.min.js' type='text/javascript'></script>
 <link rel="stylesheet" href="style.css" />
 <title>Slider V2</title>
</head>
<body>
<script class='java' src='jquery.js' type='text/javascript'></script>
<center>
 <div class="sliderdiv">
  <img id="slideredp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyXS4YyNxJM71Ue8CDKvwZ0BFIUOG627lV5g2OXpwqyjZDIyaXzFwYOzxD62h7dEwG9SsqNrKftd90wQ7WjGaTJu9mttdmRgXKPbu-VJ4GEJOdF4PqZAYsJW-Tilq3NhTNw5YQPE89OIW/s1600/C%2523M%25C3%25BCzik%25C3%2587alarProgram%25C4%25B1V2.PNG" alt="" />
 <br />
  <label id="tittle">C# MÜZIK ÇALAR PROGRAMI V2</label>
  <a id="linkedp" target="_blank" href="https://ekabav.blogspot.com/2019/06/c-muzik-calar-program-v2.html">Oku</a>
 </div>

<!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" xml:lang="tr">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <script class='java' src='jquery.min.js' type='text/javascript'></script>
 <link rel="stylesheet" href="style.css" />
 <title>Slider V2</title>
</head>
<body>
<script class='java' src='jquery.js' type='text/javascript'></script>
<center>
 <div class="sliderdiv">
  <img id="slideredp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyXS4YyNxJM71Ue8CDKvwZ0BFIUOG627lV5g2OXpwqyjZDIyaXzFwYOzxD62h7dEwG9SsqNrKftd90wQ7WjGaTJu9mttdmRgXKPbu-VJ4GEJOdF4PqZAYsJW-Tilq3NhTNw5YQPE89OIW/s1600/C%2523M%25C3%25BCzik%25C3%2587alarProgram%25C4%25B1V2.PNG" alt="" />
 <br />
  <label id="tittle">C# MÜZIK ÇALAR PROGRAMI V2</label>
  <a id="linkedp" target="_blank" href="https://ekabav.blogspot.com/2019/06/c-muzik-calar-program-v2.html">Oku</a>
 </div>

 jquery.js
var resim_sirasi = 1;
 var resim = "";
 var url="";
 var tittle="";
 
 setInterval(function(){
  $("#slideredp").css("transition","all 0.5s");
  $("#slideredp").css("opacity","0");
  resim_sirasi++;
  if(resim_sirasi >= 6){resim_sirasi = 1;}
  resim_sirala();
 },8000);
 
 function tiklama(resim_sirasi){
  console.log(resim_sirasi);
  resim_sirala();
 }
 
 function resim_sirala(){
  switch (resim_sirasi){
   case 1:
   resim="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyXS4YyNxJM71Ue8CDKvwZ0BFIUOG627lV5g2OXpwqyjZDIyaXzFwYOzxD62h7dEwG9SsqNrKftd90wQ7WjGaTJu9mttdmRgXKPbu-VJ4GEJOdF4PqZAYsJW-Tilq3NhTNw5YQPE89OIW/s1600/C%2523M%25C3%25BCzik%25C3%2587alarProgram%25C4%25B1V2.PNG";
   url="https://ekabav.blogspot.com/2019/06/c-muzik-calar-program-v2.html";
   tittle="C# MÜZIK ÇALAR PROGRAMI V2";
   break;
   case 2:
   resim="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOluwXW5czYqNJ2UFjVa4rw1rCc4PzP3mK61jjRSawQOy71pv7hq_9xl5zmEEkjEk-4ks_tOAM4bYqQcMzUZ4KiHSok0qShOS0i6seRBlpOiZ05T3NtXMcgy9aim6TlLF41sJsaUEtyCrN/s1600/c%2523+m%25C3%25BCzik+%25C3%25A7alar.PNG";
   url="https://ekabav.blogspot.com/2019/06/c-muzik-calar-program.html";
   tittle="C# MÜZIK ÇALAR PROGRAMI";
   break;
   case 3:
   resim="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhST4TGm5Hhy1n-W-n88AU8joxvawIufhQBHkjsksC-Ybs0mIrK1ZPv-qxNZqrW7mXhXFiVguILoUr8aH1a9Tv-ISDZixWBfvBSo1xHS_37d5w3hqPfk6l3zp41IZZ9NxyboxNnUSBnekVa/s1600/blogsitesi.png";
   url="https://ekabav.blogspot.com/2019/05/php-mysql-admin-panelli-blog-sitesi.html";
   tittle="PHP - MYSQL ADMIN PANELLI BLOG SITESI";
   break;
   case 4:
   resim="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDBL-ggMfbhphHBvnSS-UxV_zc8j2zZS0J69On3JfGEVtP4OcMZiSPCJSRttjYN9vtNr_5HzDhkmMODj3omsqvbP-DJtbQDshBaiYGH_nYJAQ_BlPBoqXOiPuB6N3YzqKiNhchf1wmho1/s1600/sohbet-sayfasi.png";
   url="https://ekabav.blogspot.com/2019/05/php-ve-mysql-sohbet-sayfas.html";
   tittle="PHP VE MYSQL SOHBET SAYFASI";
   break;
   case 5:
   resim="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3t9UUIdXrYHqHqo0iRkQVhzgpzKcCs0XegR_LUw77VtIQvSPc0dK4fsx0f6QXpRZZmYZmakKs2vQxH-41UpyY-p4f5dPQzdr2FrcdPnH21TWh_ez7MOeg2I554ADao_1cn_j1d4HD3HAg/s1600/denemehakkisayaci.png";
   url="https://ekabav.blogspot.com/2019/05/c-deneme-hakk-sayac.html";
   tittle="C# DENEME HAKKI SAYACI";
   break;
   default:
   resim="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyXS4YyNxJM71Ue8CDKvwZ0BFIUOG627lV5g2OXpwqyjZDIyaXzFwYOzxD62h7dEwG9SsqNrKftd90wQ7WjGaTJu9mttdmRgXKPbu-VJ4GEJOdF4PqZAYsJW-Tilq3NhTNw5YQPE89OIW/s1600/C%2523M%25C3%25BCzik%25C3%2587alarProgram%25C4%25B1V2.PNG";
   url="https://ekabav.blogspot.com/2019/06/c-muzik-calar-program-v2.html";
   tittle="C# MÜZIK ÇALAR PROGRAMI V2";
  }
  resim_degis();
 }
 
 function resim_degis(){
  setTimeout(function(){
   $("#slideredp").attr("src" , resim);
   $("#slideredp").css("transition","all 0.7s");
   $("#slideredp").css("opacity","1");
   $("#linkedp").attr("href",url);
   $("#linkedp").attr("alt",tittle);
   $("#linkedp").attr("tittle",tittle);
   $("#slideredp").attr("tittle",tittle);
   $("#slideredp").attr("alt",tittle);
   document.getElementById("tittle").innerHTML = tittle;
   document.getElementById("radio_"+resim_sirasi).checked = true;
  },500);
 }

 style.css
#linkedp{
 margin-top:5px;
 border:1px solid transparent;
 padding:5px;
 color:white;
 transition:all 0.3s ease;
 background:red;
 text-decoration:none;
 float:right;
}
#linkedp:hover{
 color:red;
 border-color:red;
 background:none;
}
.sliderdiv{
 width:50%;
}
#slideredp{
 width:100%;
}
#tittle{
 margin-top:5px;
 float:left;
}

Etiketler :
html slidersliderjs slider

Html Slider V2

İletişim Formu