ボタンをクリックすると、DIVがフェードアウトし、別のDIVが同じ場所でフェードインします。

Question

（3）DIVSの順序付けられていないリストの横に完全に機能するイメージスライダが浮かんでいます。スライダーの最初の色は最初のDIVに対応します。誰かがスライダーの「次へ」ボタンをクリックしたときにスライダーが次の色に移行するだけでなく、その隣に浮かぶDIVがフェードアウトし、次のDIVが対応する効果を作成しようとしています

私はスライダを動作させていますが、スライダの色に対応する各DIVをボタンのクリックごとに連続的にループする方法がわかりません。

私はjqueryに相対的な初心者ですが、私はより複雑なロジックのいくつかを理解することができます。私は理解できません。私はDIVのオーバーフローを隠してみました、そして画像スライダーの同じプロセスに従いますが、運はありません。

本当に助けていただきありがとうございます。私がこれまでに持っていたことのJsfiddleは以下の通りです。

<ul id="slide_info"> 
    <div id="info1"> 
     <h2>Blue Header</h2> 
     <p>Description</p> 
    </div> 

    <div id="info2"> 
     <h2>Red Header</h2> 
     <p>Description</p> 
    </div> 

    <div id="info3"> 
     <h2>Yellow Header</h2> 
     <p>Description</p> 
    </div> 


</ul> 

https://jsfiddle.net/lgwj/Lb6p87ft/1/

Answer 1

ここにあります。要件に応じてdivの高さと幅を調整できます。

jQuery(document).ready(function ($) { 
 
    
 
\t var slideCount = $('#slider ul li').length; 
 
\t var slideWidth = $('#slider ul li').width(); 
 
\t var slideHeight = $('#slider ul li').height(); 
 
\t var sliderUlWidth = slideCount * slideWidth; 
 
\t 
 
\t $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
\t $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
 
    $('#slider ul li:last-child').prependTo('#slider ul'); 
 

 
    var slideinfoWidth = $('.desc').width(); 
 
    var slideinfoHeight = $('.desc').height(); 
 
    var sliderUlinfoWidth = slideCount * slideWidth; 
 
    
 
     $('#slide_info').css({ width: slideinfoWidth, height: slideinfoHeight }); 
 
    $('#info').css({ width: sliderUlinfoWidth}); 
 

 
    function moveRight() { 
 
     $('#slider ul').animate({ 
 
      left: - slideWidth 
 
     }, 300, function() { 
 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
 
      $('#slider ul').css('left', ''); 
 
     }); 
 
     $('#info').animate({ 
 
      left: - slideinfoWidth 
 
     }, 300, function() { 
 
      $('.desc:first-child').appendTo('#info'); 
 
      $('#info').css('left', ''); 
 
     }); 
 
    }; 
 
\t 
 
    $('a.control_next').click(function() { 
 
     moveRight(); 
 
    }); 
 

 
});

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 20px auto 0 auto; 
 
    float:right; 
 
    width: 50% !important; 
 
} 
 

 
#slider ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 550px; 
 
    list-style: none; 
 
} 
 

 
#slider ul li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 639.5px; 
 
    height: 550px; 
 
    text-align: center; 
 
    line-height: 300px; 
 
} 
 

 
a.control_next { 
 
    position: absolute; 
 
    top: 45%; 
 
    z-index: 999; 
 
    display: block; 
 
    padding: 50px 50px; 
 
    width: auto; 
 
    height: auto; 
 
    background-color: #fff; 
 
    color: #000; 
 
    text-decoration: none; 
 
    opacity: 0.5; 
 
    background-image:url(prev-icon.png); 
 
    background-repeat:no-repeat; 
 
} 
 

 
a.control_prev:hover, a.control_next:hover { 
 
    opacity: 1; 
 
    -webkit-transition: all 0.2s ease; 
 
} 
 

 

 
a.control_next { 
 
    right: 0; 
 
} 
 

 
.slider_option { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 160px; 
 
    font-size: 18px;} 
 
    
 
    
 
    
 
#feat { 
 
    \t width: 100%;} 
 
    
 
    
 
.feat_slides { 
 
\t background-position: center top; 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat;} 
 
\t 
 
#feat_slide1 { 
 
\t background: #006699;} 
 
\t 
 
#feat_slide2 { 
 
\t background: #CC0033;} 
 
\t 
 
#feat_slide3 { 
 
\t background:#FFFF99;} 
 
\t 
 
\t 
 
#slide_info { 
 
\t float: left; 
 
\t width:50%; 
 
\t padding-left: 0;} 
 
\t 
 
.slide_info { 
 
\t } 
 
\t 
 
#info1, #info2, #info3 { 
 
\t background-color: #fff; 
 
\t width: 50%; 
 
\t height: 500px; 
 
\t padding-top: 215px; 
 
\t padding-left: 30px;} 
 

 
.desc{ 
 
    float:left; 
 
} 
 
#slide_info{ 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="feat"> 
 
\t <ul id="slide_info"><div id="info"> 
 
    \t <div class="desc" id="info1"> 
 
\t \t \t <h2>Blue Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> 
 
     
 
     <div class="desc" id="info2"> 
 
\t \t \t <h2>Red Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> \t 
 
     
 
     <div class="desc" id="info3"> 
 
\t \t \t <h2>Yellow Header</h2> 
 
\t \t \t <p>Description</p> 
 
     </div> \t 
 
     </div> 
 
\t </ul> 
 
    
 
<div id="slider"> 
 
    <a href="#" class="control_next" id="toggle_info">BUTTON</a> 
 
    <ul> 
 
    <li class="feat_slides" id="feat_slide1"></li> 
 
    
 
    <li class="feat_slides" id="feat_slide2"></li> 
 
    
 
    <li class="feat_slides" id="feat_slide3"></li> 
 
    </ul> 
 
</div> 
 

 
</div>

Answer 2

私が見た最初の明白なことは、ulの直接の子としてdivました。
問題が発生しない場合でも、HTMLは無効です。現代のブラウザのほとんどはです。がこれを修正しています...しかし、それでもやり方は悪いことです。

<ul id="slide_info">の中のdivの要素は、<li>と</li>で囲まれている必要があります。

あなたのコードについて、あなたは巧妙なappendToのトリックを使ってリスト項目を「循環」させました...同じトリックを使用するだけではどうですか？

フェードイン/アウトについて...考慮するアニメーションの遅延があります。コールバックは、別のコールバックの完了時に実行される関数です。

$(document).ready(function(){ 

    // Variable declarations 
    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    // Positionning 
    $('#slider').css({ width: slideWidth, height: slideHeight }); 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    // ??? Why this "re-ordering" on load? 
    $('#slider ul li:last-child').prependTo('#slider ul'); 

    // Hide all slide-info item except the first 
    $("#slide_info li").not("#slide_info li:nth-child(1)").hide(); 

    // Click handler 
    $('a.control_next').click(function() { 

    // Animate the slides 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 300, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 

    // Animate slide infos 
    // Get the visible one into a variable 
    var visible = $("#slide_info li:visible"); 
    // Fade it out and fade in the next one 
    visible.fadeOut(300, function(){ 
     // This is a callback, so after the fadeOut: 
     visible.next().fadeIn(300,function(){ 
     // This is also a callback... 
     // "visible" is now faded out, but still in this variable. 
     // Append it to the end of the list. 
     visible.appendTo("#slide_info"); 
     }); 
    }) 
    }); 

}); 

Your Fiddle updated