Question

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

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

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

https://jsfiddle.net/n339tzff/

Answer 1

尝试将$(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'); }); });类添加到活动图像，而不是show（）/ hide（）图像。请查看下面的代码段以供参考。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

text

＆＃13;

Answer 2

我为你做了一个简短的例子，希望它有所帮助：

＆＃13;

$(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()
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

滑块未使用next（）显示所有图像.show（）

2 个答案: