滑块不显示使用next（）的所有图像show（）

Question

我只是试图创建一个简单的滑块。我的问题是，当我点击'下一步'时，第一个图像将被隐藏，但只显示第二个图像。所以我只能点击“下一步”按钮。

$(document).ready(function() { 
    $('.next').on('click', function() { 
     $('.slider img').hide().next().show(); 
    }); 
}); 

如何隐藏未隐藏的单个图像并显示下一个图像？

https://jsfiddle.net/n339tzff/

Answer 1

相反显示的（）/隐藏（）图像尝试添加.active类活动图像。检查下面的代码片段以供参考。

$(document).ready(function() { 
 
    $('.next').on('click', function() { 
 
    $('.slider').find('img.active').removeClass('active').next().addClass('active'); 
 
    }); 
 
    $('.back').on('click', function() { 
 
    $('.slider').find('img.active').removeClass('active').prev().addClass('active'); 
 
    }); 
 
});

.slider { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
.slider img { 
 
    float: left; 
 
    display: none; 
 
} 
 

 
.next, 
 
.back { 
 
    width: 100px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: skyblue; 
 
    float: left; 
 
    margin: 10px; 
 
    cursor: pointer; 
 
} 
 

 
img.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    <img class="active" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
 
    <img src="https://www.w3schools.com/css/img_lights.jpg" alt=""> 
 
    <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt=""> 
 
    <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt=""> 
 
    <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt=""> 
 
</div> 
 
<div class="back">Back</div> 
 
<div class="next">Next</div>

Answer 2

我做了一个简单的例子给你，希望它有助于：

$(document).ready(function() { 
 
    var pos = 0; 
 
    $('.back').on('click', function() { 
 
     if(pos>0) pos-- 
 
     $(".slider > img").hide() 
 
     $(".slider > img").eq(pos).fadeIn("slow"); 
 
     if(pos==0) $(this).hide() 
 
     else $('.next').show() 
 
    }); 
 

 
    $('.next').on('click', function() { 
 
     if(pos<2) pos++ 
 
     $(".slider > img").hide() 
 
     $(".slider > img").eq(pos).fadeIn("slow"); 
 
     if(pos==2) $(this).hide() 
 
     else $('.back').show() 
 
    }); 
 
});

.slider { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.slider img { 
 
    float: left; 
 
} 
 
.next, .back { 
 
    width: 100px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: skyblue; 
 
    float: left; 
 
    margin: 10px; 
 
    cursor: pointer; 
 
} 
 
.back{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
 
    <img src="https://www.w3schools.com/css/img_lights.jpg" alt=""> 
 
    <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt=""> 
 
    <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt=""> 
 
    <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt=""> 
 
</div> 
 
<div class="back">Back</div> 
 
<div class="next">Next</div>