kuaforumcepte
Otomatik Geçişli Slider Nasıl Yapılır

Slider Yapımı İçin Html ,Css ve JavaScrip Kodlarını Aşağıya Ekledim 

HTML Kodları
  1. <h2>Otomatik Geçişli Slider Yapımı</h2>
  2. <p>Resimler 2 Saniye'de bir değişmektedir.</p>
  3. <div class="slideshow-container">
  4. <div class="mySlides fade">
  5. <div class="numbertext">1 / 3</div>
  6. <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  7. <div class="text">Sldier 1 Yazı Alanı</div>
  8. </div>
  9. <div class="mySlides fade">
  10. <div class="numbertext">2 / 3</div>
  11. <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
  12. <div class="text">Sldier 2 Yazı Alanı</div>
  13. </div>
  14. <div class="mySlides fade">
  15. <div class="numbertext">3 / 3</div>
  16. <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  17. <div class="text">Sldier 3 Yazı Alanı</div>
  18. </div>
  19. </div>
  20. <br>
  21. <div style="text-align:center">
  22. <span class="dot"></span>
  23. <span class="dot"></span>
  24. <span class="dot"></span>
  25. </div>
Style Kodları
  1. * {box-sizing:border-box}
  2. body {font-family: Verdana,sans-serif;}
  3. .mySlides {display:none}
  4. /* Slideshow container */
  5. .slideshow-container {
  6. max-width: 1000px;
  7. position: relative;
  8. margin: auto;
  9. }
  10. /* Caption text */
  11. .text {
  12. color: #f2f2f2;
  13. font-size: 15px;
  14. padding: 8px 12px;
  15. position: absolute;
  16. bottom: 8px;
  17. width: 100%;
  18. text-align: center;
  19. }
  20. /* Number text (1/3 etc) */
  21. .numbertext {
  22. color: #f2f2f2;
  23. font-size: 12px;
  24. padding: 8px 12px;
  25. position: absolute;
  26. top: 0;
  27. }
  28. /* The dots/bullets/indicators */
  29. .dot {
  30. height: 13px;
  31. width: 13px;
  32. margin: 0 2px;
  33. background-color: #bbb;
  34. border-radius: 50%;
  35. display: inline-block;
  36. transition: background-color 0.6s ease;
  37. }
  38. .active {
  39. background-color: #717171;
  40. }
  41. /* Fading animation */
  42. .fade {
  43. -webkit-animation-name: fade;
  44. -webkit-animation-duration: 1.5s;
  45. animation-name: fade;
  46. animation-duration: 1.5s;
  47. }
  48. @-webkit-keyframes fade {
  49. from {opacity: .4}
  50. to {opacity: 1}
  51. }
  52. @keyframes fade {
  53. from {opacity: .4}
  54. to {opacity: 1}
  55. }
  56. /* On smaller screens, decrease text size */
  57. @media only screen and (max-width: 300px) {
  58. .text {font-size: 11px}
  59. }
Javascript Kodları

Aşağıda yer alan kodlar ile resimleri otomatik olarak geçişini sağlayabilirsiniz. Kod içerisinde yer alan süre alanını değiştirerek kullanabilirsiniz.

  1. <script>
  2. var slideIndex = 0;
  3. showSlides();
  4. function showSlides() {
  5. var i;
  6. var slides = document.getElementsByClassName("mySlides");
  7. var dots = document.getElementsByClassName("dot");
  8. for (i = 0; i < slides.length; i++) {
  9. slides[i].style.display = "none";
  10. }
  11. slideIndex++;
  12. if (slideIndex> slides.length) {slideIndex = 1}
  13. for (i = 0; i < dots.length; i++) {
  14. dots[i].className = dots[i].className.replace(" active", "");
  15. }
  16. slides[slideIndex-1].style.display = "block";
  17. dots[slideIndex-1].className += " active";
  18. setTimeout(showSlides, 2000); // Bu alandan resimlerin geçiş süresini değiştirebilirsiniz.
  19. }
  20. </script>

 

Blog : Otomatik Geçişli Slider Nasıl Yapılır
C# Mysql Bağlantısı
Arduino Bluetooth İle Araba Kontrolü
Raspberry Pi Servo Motor Kontrolü
Linux İşletim Sistemlerinde SSH (Secure Shell) Yapılandırması
C# Mysql Bağlantısı,Ekle, Sil, Güncelle Resimli Anlatım / Kaynak Kodlar
Oyun Oynayarak Para Kazanmak Bitcoin Kazanmak
Mobil Uyumlu Tema Yazılımı


tcmb.gov.tr'den GÜNCEL DÖVİZ KURU

dolar_kur USD Alış: 18.5057

dolar_kur USD Satış: 18.5799

euro_kur EUR Alış: 18.1268

euro_kur EUR Satış: 18.1995

metamask phantom 2022. Tüm Hakları Saklıdır.
Facebook Twitter Instagram