スライダキャプションのオーバーラップ

Question

このスライダー/フェーダー/カルーセルをゼロから作成し、ドットのクリック可能性は上手く実装されていますが、その機能のために特定のイメージを選択すると各イメージのキャプションがブリードスルーします。スライダーはまだ実装され、実行されています。ユーザーが特定のドットを特定の時間クリックすると、その機能を停止または一時停止してから、再度実行する方法はありますか？アクティブではないキャプションを隠す別の方法はありますか？私はいくつかの方法を試しましたが、何も正しく機能しません。

function cycleImages() { 
 
    var $active = $('.image.active'); 
 
    var $next = $active.next().length > 0 ? $active.next() : $('.image:first'); 
 
    $active.animate({ 
 
    opacity:'0' 
 
    },400,function(){ 
 
    $active.removeClass('active') 
 
    $next.animate({ 
 
     opacity:'1' 
 
    },400,function(){ 
 
     $next.addClass('active'); 
 
    }) 
 
    }); 
 
} 
 

 
$(document).ready(function(){ 
 
    
 
    setInterval('cycleImages()', 7000); 
 
    
 
    $(".fader, .dots.one").on("click", function(){ 
 
    \t if($(this).hasClass("one")) { 
 
    \t \t $(".dots.one").toggleClass('dot-active'); 
 
    \t \t $(".dots.two, .three, .four, .five").removeClass('dot-active'); 
 
    \t \t $(".image, .img-1").siblings(".img-2, .img-3, .img-4, .img-5").css("opacity", "0"); 
 
    \t \t $(".img-1, .caption").css("opacity", "1"); 
 

 
     } 
 
    }); 
 
    $(".fader, .dots.two").on("click", function(){ 
 
    \t if($(this).hasClass("two")) { 
 
    \t \t $(".dots.two").toggleClass('dot-active'); 
 
    \t \t $(".dots.one, .three, .four, .five").removeClass('dot-active'); 
 
    \t \t $(".image, .img-2").siblings(".img-1, .img-3, .img-4, .img-5").css("opacity", "0"); 
 
    \t \t $(".img-2, .caption").css("opacity", "1"); 
 

 
     } 
 
    }); 
 
    $(".fader, .dots.three").on("click", function(){ 
 
    \t if($(this).hasClass("three")) { 
 
    \t \t $(".dots.three").toggleClass('dot-active'); 
 
    \t \t $(".dots.one, .two, .four, .five").removeClass('dot-active'); 
 
    \t \t $(".image, .img-3").siblings(".img-1, .img-2, .img-4, .img-5").css("opacity", "0"); 
 
    \t \t $(".img-3, .cp-3").css("opacity", "1"); 
 

 
     } 
 
    }); 
 
    $(".fader, .dots.four").on("click", function(){ 
 
    \t if($(this).hasClass("four")) { 
 
    \t \t $(".dots.four").toggleClass('dot-active'); 
 
    \t \t $(".dots.one, .two, .three, .five").removeClass('dot-active'); 
 
    \t \t $(".image, .img-4").siblings(".img-1, .img-2, .img-3, .img-5").css("opacity", "0"); 
 
    \t \t $(".img-4, .cp-4").css("opacity", "1"); 
 

 
     } 
 
    }); 
 
    $(".fader, .dots.five").on("click", function(){ 
 
    \t if($(this).hasClass("five")) { 
 
    \t \t $(".dots.five").toggleClass('dot-active'); 
 
    \t \t $(".dots.one, .two, .three, .four").removeClass('dot-active'); 
 
    \t \t $(".image, .img-5").siblings(".img-1, .img-2, .img-3, .img-4").css("opacity", "0"); 
 
    \t \t $(".img-5, .cp-5").css("opacity", "1"); 
 

 
     } 
 
    }); 
 
});

div.image div.caption { 
 
    display: visible; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    z-index: 20; 
 
    color: white; 
 
    background-color: rgba(0,0,0,0.3); 
 
    height: 10%; 
 
    width: 99.5%; 
 
    bottom: 0; 
 
    font-family: arial; 
 
    font-size: 10pt; 
 
    padding: 0.5em; 
 
} 
 
.fader { 
 
    height: 40vw; 
 
} 
 

 
.fader div.image img { 
 
    margin-left: -4.25em; 
 
} 
 
.fader { 
 
    border-radius: 1em; 
 
    height: 25vw; 
 
    width: 74vw; 
 
    max-height: 100%; 
 
    min-height: 10vw; 
 
    margin: 0 auto; 
 
    border-left: 1.5em solid #aa917d; 
 
    border-right: 1.5em solid #aa917d; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.fader div.image img { 
 
    display: block; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    z-index: 1; 
 
    position: absolute; 
 
} 
 

 
div.image img { 
 
    z-index: 5; 
 
} 
 

 
div.image{ 
 
    opacity:0; 
 
    transition:all 1s ease-in; 
 
} 
 

 
div.image.active{ 
 
    opacity:1; 
 
} 
 

 
.dots { 
 
    float: right; 
 
    background-color: rgba(255,255,255,100); 
 
    border: none; 
 
    border-radius: .85vw; 
 
    display: inline-block; 
 
    height: .85vw; 
 
    width: .85vw; 
 
    margin: .2em .2em .2em .2em; 
 
} 
 

 
.dots.active { 
 
    background-color: #aa917d; 
 
} 
 

 
.dot-container button { 
 
\t padding: 0px; 
 
} 
 
.dot-container { 
 
    float: right; 
 
    margin-right: .5em 
 
} 
 
.dot-active { 
 
\t background-color: #766557; 
 
} 
 

 
button { 
 
    font-family: arial; 
 
    color: white; 
 
    cursor: pointer; 
 
    border: none; 
 
    background: none; 
 
    padding-left: 0px; 
 

 
} 
 

 
button:focus { 
 
    outline: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="fader"> 
 
\t \t \t <div class="image img-1 active"> 
 
\t \t \t \t <img class="" src="http://media.istockphoto.com/vectors/watercolor-blue-banner-vector-id520176256?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill"> 
 
\t \t \t \t <div class="caption"> 
 
\t \t \t \t \t <span class="image-info cp-1 active"><a>Harvard Law School - Cambridge, MA</a></span> 
 
\t \t \t \t \t <div class="dot-container"> 
 
\t \t \t \t \t \t <button><span class="dots five"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots four"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots three"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots two"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots one active"></span></button> 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="image img-2"> \t 
 
\t \t \t \t <img class="" src="http://media.istockphoto.com/illustrations/turquoise-and-chartreuse-mottled-background-with-dotted-pattern-illustration-id505491352?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill"> 
 
\t \t \t \t <div class="caption"> 
 
\t \t \t \t \t <span class="image-info cp-2"><a>Battery Wharf - Boston, MA</a></span> 
 
\t \t \t \t \t <div class="dot-container"> 
 
\t \t \t \t \t \t <button><span class="dots five"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots four"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots three"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots two active"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots one"></span></button> 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="image img-3"> \t 
 
\t \t \t \t <img class="" src="http://media.istockphoto.com/illustrations/blank-abstract-light-blue-watercolor-background-illustration-id499570852?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill"> 
 
\t \t \t \t <div class="caption"> 
 
\t \t \t \t \t <span class="image-info cp-3"><a>Back Bay Hotel - Boston, MA</a></span> 
 
\t \t \t \t \t <div class="dot-container"> 
 
\t \t \t \t \t \t <button><span class="dots five"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots four"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots three active"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots two"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots one"></span></button> 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="image img-4"> \t 
 
\t \t \t \t <img lass="" src="http://media.istockphoto.com/illustrations/gold-glitter-painted-background-illustration-id512988164?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill"> 
 
\t \t \t \t <div class="caption"> 
 
\t \t \t \t \t <span class="image-info cp-4"><a>Ashmont MBTA Station - Dorchester, MA</a></span> 
 
\t \t \t \t \t <div class="dot-container"> 
 
\t \t \t \t \t \t <button><span class="dots five"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots four active"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots three"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots two"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots one"></span></button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="image img-5"> \t 
 
\t \t \t \t <img class="" src="http://media.istockphoto.com/illustrations/pink-orange-backgrounds-watercolor-painting-abstract-illustration-id514635080?s=2048x2048" alt="" style="height: 100%; width:auto; object-fit: fill"> 
 
\t \t \t \t <div class="caption"> 
 
\t \t \t \t \t <span class="image-info cp-5"><a>----------</a></span> 
 
\t \t \t \t \t <div class="dot-container"> 
 
\t \t \t \t \t \t <button><span class="dots five active"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots four"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots three"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots two"></span></button> 
 
\t \t \t \t \t \t <button><span class="dots one"></span></button> 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t 
 
\t \t </div>

Answer 1

まず、あなたはそれがそんなに悪い記述があります。ここでは、コードです。重複がたくさんあります。

あなたは何を食べるのですか？キャプション付きの画像を表示するスライダ？いくつかの円（点）は現在のイメージを変更することができますか？

今何が問題ですか？

Answer 2

私が知っている方法は、setTimeout()です。だから、それはなりますコーディングで

：

$('.dot1').click(function(){ 
    setTimeout(function(){alert("This actually works");}, 2000); // 2000 Means 2 Minutes 
}); 

幸運:)