Question

我有一个像这样的图像滑块：

<div class="outer_wrapper_hide" id="outer_wrapperID">
    <div class="inner_wrapper" id="inner_wrapperID">
        <img id="slideimage1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
        <img id="slideimage2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
    </div>
    <img width="100" height="100" class="smallimage_forslide1" id="smallimage" src="http://web.mit.edu/bzbarsky/www/testcases/css3-issues/blackSquare.png">
    <p class="text1" id="text1id">This is slide 1.</p>
    <p class="text2" id="text2id">This is slide 2.</p>
    <p class="text3" id="text2id">This is slide 3.</p>
    <img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
    <img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />
</div>

点击小提琴，使用css和javascript查看其效果：https://jsfiddle.net/9xm2c9er/2/

如您所见，所有这些元素都显示出来： “这是幻灯片1.”，“这是幻灯片2”，“这是幻灯片3”，以及小的黑色方形图像。

如何可以隐藏“这是幻灯片1.”我滑到“slideimage2”时的黑色方形图像，以及带有“slideimage1”和“slideimage3”的vica verca？

我一直在考虑在“Next”和“Previous”javascript中添加某种if语句，但是如何检测第n张幻灯片图像何时被滑动？

$('.next').click(function () {
    $('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');

    if($('.inner_wrapper img:eq(0)')) {
        $('#text1id').show();
        $('#smallimage').show();
    }
    else {
        $('#text1id').hide();
        $('#smallimage').hide();        
    }

 });

我相信我在这里使用的if语句不起作用，因为它阻止了滑块出现。

我感谢所有的贡献 - 非常感谢！

编辑：为了澄清，我想提一下滑块有2个以上的图像，并且我有几个不同的标签元素，我想隐藏/显示;的＆LT; p> （文字），＆lt; a＆gt; （链接）和＆lt; img＆gt; （幻灯片上的小图片）。

我已经在小提琴中添加了基本图像滑块，您可以使用图像，以及任何绝对定位元素在里面。然而，在我的小提琴中，它们将在所有幻灯片中可见。
根据我目前收到的两个答案，他们都可以为每个单独的幻灯片更改一种元素（在这些答案中，p标签），通过索引一个公共类。他们都以类似的方式工作。
但是，我还没有选择一个解决方案，因为我还需要弄清楚如何使用每个幻灯片的几个不同元素，在数量和类型方面。例如，在第一张幻灯片上，我可以有2＆lt; a＆gt;链接，4＆lt; p>文本标签，1＆lt;按钮＆gt;，但在第二张幻灯片上，我可能有不同数量的元素。

编辑2 ：以下是解决方案的小提琴：https://jsfiddle.net/n0z6u07p/1/。通过在div中包装元素，您可以显示/隐藏它们，具体取决于滑块中滑动的图像。

Answer 1

以下是我用于解决类似问题的方法：首先隐藏所有元素，然后显示唯一需要的（选定）元素。

所以代码应如下所示：

HTML

...
<p class="text text1" id="text1id">This is slide 1.</p>
<p class="text text2" id="text2id">This is slide 2.</p>
...

JS：

...
var iText = 0;
var aTexts = $('p.text'), nTexts = aTexts.length;
function showText(i) {
    aTexts.hide().eq(i).show();
}
showText(0);
$('.next').click(function () {
    ...

    iText = (iText + 1) % nTexts;
    showText(iText);
});

$('.prev').click(function () {
    ...

    iText = (iText - 1 + nTexts) % nTexts;
    showText(iText);
});

Fiddle

Answer 2

我将数据添加到您的img标签：

<div class="outer_wrapper_hide" id="outer_wrapperID">
<div class="inner_wrapper" id="inner_wrapperID">
<img id="slideimage1" data-index="1" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Svg_example_square.svg/500px-Svg_example_square.svg.png" alt="Green Square">
<img id="slideimage2" data-index="2" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/500px-000080_Navy_Blue_Square.svg.png" alt="Blue Square">
<img id="slideimage3" data-index="3" class="slideimage" height="500" width="500" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/500px-Red.svg.png" alt="Red Square">
</div>
<p class="label text1" id="text1id">This is slide 1.</p>
<p class="label text2" id="text2id" style="display: none;">This is slide 2.</p>
<p class="label text3" id="text3id" style="display: none;">This is slide 3.</p>
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/512px-Circle_arrow_left_font_awesome.svg.png" class="next" alt="Next" />
<img width="64" height="64" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Circle_arrow_right_font_awesome.svg/512px-Circle_arrow_right_font_awesome.svg.png" class="prev" alt="Previous" />

我制作了一个显示/隐藏标签的功能：

    document.getElementById("outer_wrapperID").className = "outer_wrapper_show";
$('.inner_wrapper img:eq(0)').fadeIn(500);
$('#outer_wrapperID').fadeIn(500);

$('.inner_wrapper img:gt(0)').hide();

$('.next').click(function () {
   $('.inner_wrapper img:first-child').fadeOut().next().fadeIn().end().appendTo('.inner_wrapper');
   toggleLabels();
});

$('.prev').click(function () {
  $('.inner_wrapper img:first-child').fadeOut();
  $('.inner_wrapper img:last-child').prependTo('.inner_wrapper').fadeOut();
  $('.inner_wrapper img:first-child').fadeIn();
  toggleLabels();
});

var toggleLabels = function () {
   $("p.label").hide(); 
   var firstIndex = $('.inner_wrapper img:first-child').data("index");
   $("p.text"+firstIndex).show();           
};

如何检测div（图像滑块）中的第n个图像何时显示

2 个答案: