Question

我想在div滑入视图后淡出h4标签。另外，我想在视图中为每张幻灯片添加“current”类。小提琴http://jsfiddle.net/x8euhjrt/。代码

<div class="slider">
    <div class="slides">
        <div class="slide slide-1">
        <h4>Slide 1</h4>

        </div>  
        <div class="slide slide-2">
            <h4>slide 2</h4>

        </div>  
        <div class="slide slide-3">
            <h4>slide 3</h4>

        </div>  
        <div class="slide slide-4">
            <h4>slide 4</h4>

        </div>  
        <div class="slide slide-1">
        <h4>Slide 1</h4>

        </div>
</div><!-- end homepage slider container -->

CSS：

    .slider{
    width: 550px;
    background: #d00d00;
    min-height: 385px;
    overflow: hidden;
}
.slides{
    width: 2750px;
    margin: 0;
}
.slide{
    position:relative;
    display: block;
    float: left;
    width: 550px;
    height:400px;
}
.slide-1{
    background:#dedede;
}
.slide-2{
    background:#999;
}
.slide-3{
    background:#333;
}
.slide-4{
    background:#555;
}
h4{
    background:#bada55;
    padding:15px 120px;
    display: inline-block;
    margin-top:30%;
    font-size:1.4em;
}

jQuery的：

$(document).ready(function(){
    var width = 550;
            var speed = 1000;
            var pause = 3000;
            var currentSlide = 1;
            var $slider = $(".slider");
            var $slides = $slider.find('.slides');
            var $slide = $slider.find('.slide');
            $slide.first().addClass('current');
            //alert($slide.length);

            setInterval(function(){

                $slides.animate({'margin-left': '-='+ width}, speed, function(){

                    currentSlide++;
                    if (currentSlide === $slide.length) {
                        currentSlide = 1;
                        $slides.css('margin-left', 0);

                    }


                });

            }, pause);

    });

Answer 1

查看演示here。我修改了animate（）函数的回调参数。

$slides.animate({'margin-left': '-='+ width}, speed, function(){

            currentSlide++;
            $slide.removeClass("current");
            if (currentSlide === $slide.length) {
                currentSlide = 1;
                $slides.css('margin-left', 0);

            }
            $slides.find("h4").hide();
            $slide.eq(currentSlide-1).addClass("current");
            $slide.eq(currentSlide-1).find("h4").fadeIn();
        });

Answer 2

首先更新你的css以隐藏幻灯片div中的h4

.slide h4 {
    display:none;
}

然后在查询代码中进行一些更改

    $(document).ready(function(){
        var width = 550;
        var speed = 1000;
        var pause = 3000;
        var currentSlide = 1;
        var $slider = $(".slider");
        var $slides = $slider.find('.slides');
        var $slide = $slider.find('.slide');
        $slide.first().addClass('current');

        //fade in the first slide h4
        $('.current h4').fadeIn();


        setInterval(function(){

            $slides.animate({'margin-left': '-='+ width}, speed, function(){

                currentSlide++;

                if (currentSlide === $slide.length) {
                    currentSlide = 1;
                    $slides.css('margin-left', 0);

                }
                //remove the class current from the element you added it previously
                $('.slide').removeClass('current');
                //add the class current by selecting the right element using the loop variable that stores the slide number
                $('.slide-'+currentSlide).addClass('current');

                //hide the h4 you previously fadeIn
                $('.slide h4').hide();
                //fadeIn the current slide h4
                $('.current h4').fadeIn();
            });

        }, pause);

});

幻灯片更改后淡入对象

2 个答案: