使用圖像滑塊更改文本

Question

我創建了圖片幻燈片，我想在圖片上方顯示文字。 我做到了這一點，但是我希望每組不同的文本（注意所有文本都混雜在一起，並且有三個跨度的文本，每個圖像對應一個），以顯示適當的圖像。 有沒有一種方法可以做到這一點，而無需更改已有的Javascript。 順便說一句，我不希望有人使用600多種JavaScript作為該解決方案，這就是為什么我要尋找更多的CSS解決方案來匹配Javascript或其他Javascript解決方案，以根據圖像更改文本變化。

感謝您的幫助！

* {
    padding: 0;
    margin: 0;
}
body {
    font-family: Sans-Serif;
}
.slider_img {
    max-width: 100%;
    /*height: 60vh;*/
    /*height: 100vh;*/
}
.cycle-slideshow {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.image_text {
    text-align: center;
    font-size: 3em;
    color: #FFF;
    position: absolute;
    top: 50%;
    z-index: 1000;
    left: 35%;
}
.cycle-prev, .cycle-next {
    font-size: 200%;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    z-index: 999;
    cursor: pointer;
}
.cycle-prev {
    left: 10%;
}
.cycle-next {
    right: 10%;
}
.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    overflow: hidden;
}
.cycle-pager .cycle-pager-active {
    background-color: #FFF;
}

<div class="cycle-slideshow">
    <span class="image_text">Travelling has never been easier</span>
    <span class="image_text">Beach</span>
    <span class="image_text">Space</span>
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img class="slider_img" src="images/subway2.jpg" alt="subway">
    <img class="slider_img" src="images/beach2.jpg" alt="beach">
    <img class="slider_img" src="images/space2.jpg" alt="space">
</div>

該代碼段將我拒之門外，所以我在下面的評論中張貼了一個jsfiddle，以顯示這樣做的意思。

Answer 1

刪除插件代碼，並使用它代替：

$(".slider_img").filter(":gt(0)").each(function() {
  $(this).hide();
});
$(".image_text").filter(":gt(0)").each(function() {
  $(this).hide();
});

current = 0;
limit = $(".slider_img").length;

$(".cycle-prev").click(function() {

  current--;

  if (current < 0) {
    current = 2;
  }

  $($(".slider_img").hide().get(current)).fadeIn(1000);
  $($(".image_text").hide().get(current)).fadeIn(1000);
});

$(".cycle-next").click(function() {
  current++;

  if (current >= 3) {
    current = 0;
  }

  $($(".slider_img").hide().get(current)).fadeIn(1000);
  $($(".image_text").hide().get(current)).fadeIn(1000);

});

setInterval(function() {
  $(".cycle-next").click();
}, 5000);

如您所見，它是從頭開始編寫的，因此與插件代碼無關：)