在單個部分中關於鼠標滾動一個接一個地顯示多個圖像

Question

我想在手動鼠標滾動的單個部分中逐個顯示圖像。

我嘗試用鼠標點擊和時間延遲。

<div> 
    <script> 
     $(document).ready(function() { 
      $('#snowballAppear').click(function() { 
       $('#dialo').hide().delay(3000).fadeIn(1000); 
      }); 
     }); 
    </script> 

    <img id="dialo" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="d4.png"> 
</div> 

Answer 1

這是正確的有缺失的ID #snoballapear的元素，所以我添加按鈕，也許你可以改變以後

var src = ['https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg','http://omg.mn/wp-content/uploads/2017/01/bugatai-zurag-1.png']; 
 
    var i = 0; 
 
    $(document).ready(function() { 
 
     $(window).bind('mousewheel',function() { 
 
     $('#dialo').hide().delay(1000).fadeIn(); 
 
     if (i==1){ 
 
     $('#dialo').attr('src', src[i]); 
 
     i=0; 
 
     } 
 
     else { 
 
     $('#dialo').attr('src', src[i]); 
 
     i=1; 
 
     } 
 
      
 
     }); 
 
    });

div{height:500px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div> 
 
    \t <img id="dialo" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg"> 
 
    </div>

Answer 2

如果能夠逐一顯示圖片點擊後，您可以使用相同的代碼/功能並在mousewheel事件中觸發它。

您可以使用鼠標滾輪插件捕捉mousewheel事件，就像我在下面的示例中所做的一樣。

mousewheel事件會給你一個變量，那將表明鼠標滾輪是否向上或向下滾動，你可以相應地移動到適當的幻燈片：

$(document).ready(function(){ 
 
    $("#next").on("click", function(e){ 
 
    e.preventDefault(); 
 
    showNextSlide(); 
 
    });// 
 
    
 
    $("#prev").on("click", function(e){ 
 
    e.preventDefault(); 
 
    showPrevSlide(); 
 
    });// 
 
    
 
    $("#slider").on("mousewheel", function(e){ 
 
    e.preventDefault(); 
 
    if(e.deltaY < 0){ 
 
     showNextSlide(); 
 
    }else{ 
 
     showPrevSlide(); 
 
    } 
 
    });//#slider mousewheel() 
 
});//document ready() 
 

 

 
function showNextSlide(){ 
 
    var curActiveIndex = $("#slider img.active").index(); 
 
    var numSlides = $("#slider img").length; 
 
    var nextIndex = curActiveIndex >= numSlides - 1 ? 0 : (curActiveIndex + 1); 
 
    $("#slider img.active").removeClass("active"); 
 
    $("#slider img").eq(nextIndex).addClass("active"); 
 
}//showNextSlide() 
 

 
function showPrevSlide(){ 
 
    var curActiveIndex = $("#slider img.active").index(); 
 
    var numSlides = $("#slider img").length; 
 
    var nextIndex = curActiveIndex <= 0 ? numSlides - 1 : (curActiveIndex - 1); 
 
    $("#slider img.active").removeClass("active"); 
 
    $("#slider img").eq(nextIndex).addClass("active"); 
 
}//showPrevSlide()

#slider{ 
 
    height: 200px; 
 
    position: relative; 
 
    width: 400px; 
 
} 
 
#slider img{ 
 
    left: 0; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: opacity 0.8s linear; 
 
} 
 
#slider img.active{ 
 
    opacity: 1; 
 
} 
 

 

 
.as-console-wrapper{display: none !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script> 
 

 
<div id="slider"> 
 
    <img class="active" src="http://lorempixel.com/400/200/sports" alt="Slide 1" /> 
 
    <img src="http://lorempixel.com/400/200/food" alt="Slide 1" /> 
 
    <img src="http://lorempixel.com/400/200/nature" alt="Slide 1" /> 
 
    <img src="http://lorempixel.com/400/200/fashion" alt="Slide 1" /> 
 
    <img src="http://lorempixel.com/400/200/cats" alt="Slide 1" /> 
 
</div><!--#slider--> 
 

 
<div> 
 
    <button id="prev">previous</button> 
 
    <button id="next">next</button> 
 
</div>