img
Javascript İle Basit Bir Slideshow Oluşturma

Javascript İle Basit Bir Slideshow Oluşturma

Web geliştiriciler için etkileyici bir kullanıcı deneyimi yaratmanın yollarından biri, web sitelerine interaktif öğeler eklemektir. Slideshow'lar, görsel içerikleri dinamik bir şekilde sunarak ziyaretçilerin dikkatini çekmek için mükemmel bir yöntemdir. Bu makalede, 'JavaScript slideshow', 'slideshow oluşturma', 'web tasarım JavaScript' ve 'slideshow kod örneği' anahtar kelimeleri çerçevesinde, basit bir slideshow oluşturma sürecini adım adım inceleyeceğiz.

HTML ile Slideshow Yapısı Oluşturma

Öncelikle, slideshow'un temel HTML yapısını oluşturmalıyız. Bu yapıda, bir container ve içinde bir dizi görsel bulunur.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript ile Basit Slideshow</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="mySlides fade">
            <img src="img1.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img2.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img3.jpg" style="width:100%">
        </div>
        <!-- Önceki ve Sonraki butonları -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

Bu HTML kodu, her biri mySlides sınıfına sahip üç slayt içerir. Ayrıca, slaytlar arasında geçiş yapmayı sağlayan 'Önceki' ve 'Sonraki' butonları da bulunmaktadır.

CSS ile Slideshow Stil Verme

Şimdi, slideshow'un stilini tanımlayalım. Bu stil, görsellerin düzgün bir şekilde görüntülenmesini ve geçiş animasyonlarını içerir.

/* Slideshow container */
.slideshow-container {
    position: relative;
    max-width: 1000px;
    margin: auto;
}

/* Slaytlar */
.mySlides {
    display: none;
}

/* Önceki ve Sonraki butonları */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Butonları pozisyonlandırma */
.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

/* Geçiş animasyonu */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

Bu CSS kodu, slideshow container'ının boyutlarını ayarlar, slaytları gizler ve prev ve next butonlarını konumlandırır. Ayrıca, slaytlar arasında yumuşak bir geçiş animasyonu ekler.

JavaScript ile Slideshow İşlevselliği Ekleme

Slideshow'un işlevselliğini JavaScript kullanarak ekleyeceğiz. Bu işlevsellik, slaytlar arasında geçiş yapmayı ve otomatik olarak slaytları değiştirmeyi içerir.

let slideIndex = 1;
showSlides(slideIndex);

// Önceki/sonraki kontrolleri
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Geçerli slaytı göster
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
}

Bu JavaScript kodu, slaytların gösterilmesini ve prev ve next butonları ile slaytlar arasında geçiş yapılmasını sağlar. showSlides fonksiyonu, geçerli slaytı gösterir ve diğerlerini gizler.

Örnek Kod ve Uygulama

Aşağıda, yukarıda açıklanan adımları bir araya getiren tam bir örnek bulunmaktadır.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript ile Basit Slideshow</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow-container">
        <div class="mySlides fade">
            <img src="img1.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img2.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img src="img3.jpg" style="width:100%">
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

CSS

/* Slideshow container */
.slideshow-container {
    position: relative;
    max-width: 1000px;
    margin: auto;
}

/* Slaytlar */
.mySlides {
    display: none;
}

/* Önceki ve Sonraki butonları */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

/* Geçiş animasyonu */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

JavaScript

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
}

Bu makalede, 'JavaScript slideshow', 'slideshow oluşturma', 'web tasarım JavaScript' ve 'slideshow kod örneği' anahtar kelimeleri çerçevesinde, JavaScript kullanarak basit bir slideshow oluşturma sürecini adım adım inceledik. HTML ile slideshow yapısını oluşturduk, CSS ile stil verdik ve JavaScript ile işlevsellik ekledik. Bu bilgiler ve örnek kodlar ile projelerinizde etkileyici ve interaktif slideshow'lar oluşturabilirsiniz.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    20.6K
    1000.00₺
  • Canlı Radyo Dark Scripti

    13.2K
    1000.00₺
  • Canlı Radyo Light Scripti

    7.9K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.1K
    0.00₺
  • Radyo Minimal

    3.9K
    1000.00₺
  • Ekitap Scripti

    6K
    3000.00₺
  • Aşk Sevgililer Günü Evlilik

    7.5K
    1000.00₺
  • Sohbet Scripti

    7.7K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    4.6K
    0.00₺
  • Firebase Chat

    3.7K
    0.00₺
  • Web Ajans Scripti

    23.9K
    3000.00₺
  • Ajans Scripti Kolay Kullanım

    2.9K
    1000.00₺
  • Ajans Scripti V2

    3K
    1000.00₺
  • Ajans Scripti V3

    3K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    2.6K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.9K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.6K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.2K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    39.3K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    5.2K
    1000.00₺
  • İlan Web Tasarımı

    2.2K
    1000.00₺
  • İlan Web Tasarımı V2

    2.2K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.9K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.5K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.2K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.2K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.3K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.3K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.4K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    2.7K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.1K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.4K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.6K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.3K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.3K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.1K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    5.9K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.2K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.8K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    2.6K
    1000.00₺
  • Teknik Servis Web Tasarımı

    2.7K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.1K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    2.6K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    2.8K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    2.9K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.6K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.4K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    2.7K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2.6K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    2.7K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.7K
    1000.00₺
  • Ajans Web Tasarımı V5

    3K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.2K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.1K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.4K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.4K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    5.4K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.5K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    1.5K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.4K
    1000.00₺
  • Psikolog Web Tasarımı

    1.5K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1.7K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    1.7K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2K
    1000.00₺
  • Ajans Web Tasarımı V7

    1.6K
    900.00₺
  • Google Indexing Api

    320
    500.00₺
  • Milando Radyo Wordpress Teması

    250
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img
Load Time (S) : 0.008697