Javascript JavaScriptをクリックしない場合はこちらをクリックしてください。

Question

私は自分のアプリのホームページにスライドショーのタイプエフェクトを作成しようとしていますが、JSにはかなり新しく、いくつかの複雑さに問題があります。ユーザーが自由にスライドさせるスライドから行くことができるように

<script> 
    setTimeout(function() { 
    $("#hero-image-index").fadeOut().empty(); 
    }, 6000); 
    setTimeout(function() { 
    $("#slide-1").fadeOut(500); 
    }, 6000); 
    $('#slide-2').delay(6000).fadeIn(3000); 
    setTimeout(function() { 
    $("#slide-2").fadeOut(500); 
    }, 12000); 
    $('#slide-3').delay(12000).fadeIn(3000); 
    setTimeout(function() { 
    $("#slide-3").fadeOut(500); 
    }, 18000); 
    $('#slide-4').delay(18000).fadeIn(3000); 
    setTimeout(function() { 
    $("#slide-4").fadeOut(500); 
    }, 25000); 
    $('#slide-5').delay(25000).fadeIn(3000); 
    setTimeout(function() { 
    $("#slide-5").fadeOut(500); 
    }, 32000); 
    $('#slide-6').delay(32000).fadeIn(3000); 
    setTimeout(function() { 
    $("#slide-6").fadeOut(500); 
    }, 39000); 
    $('#slide-7').delay(39000).fadeIn(3000); 
    $('#hero-image-index-2').delay(39000).fadeIn(3000); 
</script> 

しかし、今クライアントナビゲーションを望んでいる、私はそれぞれのioniconsを使用して設定している：私はこのようになります遅延やsetTimeoutsでの作業のスライドショーを持っています"滑り台"。ここではサンプル「スライド」です：

<div class="slide text-center" id="slide-1"> 
    <h1 style="margin: 75px 0 40px 0; font-size: 52px; color: white; font-weight: bolder">Genetic Golf</h1> 
    <h2 style="color: white">We&nbsp;don't&nbsp;guess, we test to find what works best&nbsp;for&nbsp;you!</h2> 
     <div class="index-icon-box" style="color: white"> 
     <i class="icon go-to-7 ion-chevron-left"></i> 
     <i class="icon go-to-1 ion-android-radio-button-on"></i> 
     <i class="icon go-to-2 ion-android-radio-button-off"></i> 
     <i class="icon go-to-3 ion-android-radio-button-off"></i> 
     <i class="icon go-to-4 ion-android-radio-button-off"></i> 
     <i class="icon go-to-5 ion-android-radio-button-off"></i> 
     <i class="icon go-to-6 ion-android-radio-button-off"></i> 
     <i class="icon go-to-7 ion-android-radio-button-off"></i> 
     <i class="icon go-to-2 ion-chevron-right"></i> 
     </div> <!-- index icon box --> 
    </div> <!-- slide 1 --> 

私は、ユーザーが.index-icon-boxの内側をクリックしない場合、私はすでにそれを持っているように、その後のJSを実行する」のようにJSで何かを期待していたが、彼らは.iconをクリックした場合そして、このような何かを：

<script> 
    $(document).ready(function() { 
    $(".go-to-1").click(function(){ 
     $("#slide-1").show(); 
     $("#slide-2").hide(); 
     $("#slide-3").hide(); 
     $("#slide-4").hide(); 
     $("#slide-5").hide(); 
     $("#slide-6").hide(); 
     $("#slide-7").hide(); 
    }); 
    $(".go-to-2").click(function(){ 
     $("#slide-1").hide(); 
     $("#slide-2").show(); 
     $("#slide-3").hide(); 
     $("#slide-4").hide(); 
     $("#slide-5").hide(); 
     $("#slide-6").hide(); 
     $("#slide-7").hide(); 
    }); 
    }; 
</script> 

しかし、どのような方法私は、これはちょうど私がやる一部を壊して終わる試み持って取り組んで

Answer 1

であなたの意図した場合の任意のjs-ウィザードは私をまっすぐにすることはできますか。ライブラリを使わずにこれを自分でやってみると、以下のことを試してみるとよいでしょう。

まず、スライドをコンテナに入れ、アイコンの上にスライドを選択するためのアイコンを重ねてください（ ）。次に、スライドとコンテナの両方のインデックスを使用してイメージを追跡します。これにより、簡単に編集できるスライドショーの設定が可能になります。

単純な例を以下に示します。これは、探しているものの近くにあるはずです。

jQuery(document).ready(function($) { 
 
    // Hides all images except for one, the one is given by an 
 
    // index. Also updates the controller. 
 
    function showSlide(index) { 
 
    $('.slides .slide').each(function(i) { 
 
     if (i == index) { 
 
     $(this).fadeIn(500); 
 
     } else { 
 
     $(this).fadeOut(500); 
 
     } 
 
    }); 
 
    
 
    var spans = $('.controller span').removeClass('active'); 
 
    spans.eq(index).addClass('active'); 
 
    } 
 

 
    // Show only the first element and set an interval to 
 
    // continue to cycle through elements. 
 
    var index = 0; 
 
    showSlide(index); 
 

 
    var intervalFunc = function() { 
 
    index = index >= $('.slides .slide').length ? 0 : index + 1; 
 
    showSlide(index); 
 
    }; 
 
    var interval = setInterval(intervalFunc, 6000); 
 

 
    // Handle clicks which will reset the interval to each time. 
 
    $('.controller span').click(function() { 
 
    // Set the current picture. 
 
    index = $(this).index(); 
 
    showSlide(index); 
 
    
 
    // Reset the interval 
 
    clearInterval(interval); 
 
    interval = setInterval(intervalFunc, 6000); 
 
    }); 
 
});

.slideshow-contianer { 
 
    position: relative; 
 
    /* For Deomnstation purposes*/ 
 
    width: 400px; 
 
    height: 200px; 
 
    margin: 2em; 
 
} 
 
.slides img { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.controller { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 0; 
 
    width: 100%; 
 
    -webkit-display: flex; 
 
    display: flex; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 
 
.controller span { 
 
    width: 4px; 
 
    height: 4px; 
 
    border-radius: 50%; 
 
    border: 2px solid #ccc; 
 
    cursor: pointer; 
 
    margin: 10px; 
 
    /* Transition is a personal asthetic. */ 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.controller span.active, 
 
.controller span:hover { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    background-color: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="slideshow-contianer"> 
 
    <div class="slides"> 
 
    <img class="slide" src="https://unsplash.it/400/200?random" /> 
 
    <img class="slide" src="https://unsplash.it/400/200?random" /> 
 
    <img class="slide" src="https://unsplash.it/400/200?random" /> 
 
    <img class="slide" src="https://unsplash.it/400/200?random" /> 
 
    <img class="slide" src="https://unsplash.it/400/200?random" /> 
 
    </div> 
 
    <div class="controller"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div>