javascript - 在选项卡按钮上播放淡入/淡出 slider 单击

Question

我创建了一个淡入/淡出 slider 。左键和右键工作正常，但我想通过单击选项卡按钮来播放 slider 。 JSfiddle

HTML

    <p id="slide1_controls">
        <div class="block-icon icon-s1">
             <img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
        </div>
        <div class="block-icon icon-s2">
             <img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
        </div>
        <div class="block-icon icon-s3">
             <img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
        </div>
        <div class="block-icon icon-s4">
             <img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
        </div>
    </p>
    <div class="slider-text-context" id="target">
         <div class="slide-01 fade-texts active">tab1</div>
         <div class="slide-02 fade-texts">tab2</div>
         <div class="slide-03 fade-texts">tab3</div>
         <div class="slide-04 fade-texts">tab4</div>
    </div>

CSS

    .fade-texts {
        width: 100%;
        height: 259px;
        left: 0px;
        position: absolute;
    }
    .slider-btn-area {
        position: absolute;
        z-index: 8;
        margin-left: auto;
        margin-right: auto;
        left: 25%;
        top: 54%;
        width: 50%;

    }
    #target > div {
      display:none;   
    }

    #target div:nth-child(1) {
      display:block;   
    }

    .tab-area {
        position: absolute;
        left: 25%;
        top: 30%;
    }

Javascript

$(".icon-s2").click(function() {
    activeElem = $("#target .slide-02"); 
    activeElem.removeClass('active').fadeOut(0);
    if (!activeElem.is(':first-child')) {
         activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
    }
}                        
$(".icon-s3").click(function() {
    activeElem = $("#target .slide-03"); 
    activeElem.removeClass('active').fadeOut(0);
    if (!activeElem.is(':first-child')) {
        activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
    }
}

当我按下选项卡时，尝试显示 DIV 不起作用。

Answer 1

您的代码毫无意义。它的外观是必须单击图像才能淡入/淡出 选项卡。我相信它应该是另一种方式。我清理了标记，并简化了类、ID、样式等...

这是 DEMO

HTML

<div id="slides">
    <div id="slide1" class="slide active">
        <img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
    </div>
    <div id="slide2" class="slide">
        <img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
    </div>
    <div id="slide3" class="slide">
        <img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
    </div>
    <div id="slide4" class="slide">
        <img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
    </div>
</div>
<div class="tab-area" id="controls">
    <div id="tab1" class="tab">1</div>
    <div id="tab2" class="tab">2</div>
    <div id="tab3" class="tab">3</div>
    <div id="tab4" class="tab">4</div>
</div>

CSS

.slide {

    display:none;

}

.active {

    display: block;

}

.tab {

    width: 16px;

    height: 16px;

    display: inline-block;

    margin: 0 10px;

    outline: 1px solid black;

    text-align: center;

    cursor: pointer;

}

jQuery/JavaScript

$(function () {

    $('.tab').on('click', function (event) {
        var tabID = event.target.id;
        //console.log('tabID: '+tabID);
        var order = tabID.split('b').pop();
        //console.log('order: '+order);
        var pos = parseInt(order, 10);
        var slideID = 'slide'+pos;
        //console.log('slideID: '+slideID);
        var act = document.getElementById(slideID);
        //console.log('act: '+act.id);
        $('.slide').fadeOut(0).removeClass('active');
        $(act).addClass('active').fadeIn(750);
    });
});