Question

我写了一些HTML，CSS和Jquery，但它没有用。我只想让滑块淡入图像并将内容淡入其中，然后将其向右滑动而不显示其他幻灯片。

这是我的HTML：

        <div class="slider">
            <div id ="1">
                <h2>Greetings!</h2>
                <p>Welcome to PowerUp, where imagination becomes a reality.</p>
                <img src="../img/HTML5-Guy-BBeanie.png">
            </div>
            <div id="2">
                <h2>Meet people.</h2>
                <p>Work with people who get stuff done.</p>
                <img src="../img/HTML5-Guy-BBeanie.png">
            </div>
            <div id="3">
                <h2>Form teams.</h2>
                <p>Create teams of engineers best suited for your needs.</p>
                <img src="../img/HTML5-Guy-BBeanie.png">
            </div>
            <div id="4">
                <h2>Drop by.</h2>
                <p>Visit our drop by page and share an idea or a thought, who knows maybe someone will pick up on it.</p>
                <img src="../img/HTML5-Guy-BBeanie.png">
            </div>
        </div>

CSS：

/**********************
*********SLIDER********
**********************/
.slider {
    padding: 1.2% 0 8% 0;
    margin: 0 auto;
    width: 100%;
    height: 460px;
    overflow: hidden;
    background-color: #EFEFEF;
}

.slider img {
    width: 460px;
    height: 460px;
    display: none;
}

.slider h2, .slider p {
    display: none;
}

Jquery的：

function topSlider() {
$('.slider #1').show('fade', 500);
$('.slider #1').delay(5500).hide('slide',{direction: 'left'}, 500);

var sc = $('.slider div').size();
var count = 2;

setInterval(function() {
    $('.slider #' + count).show('slide', {direction: 'right'}, 500);
    $('.slider #'+ count).delay(5500).hide('slide', {direction: 'left'}, 500);

    if (count == sc) {
        count = 1;
    } else {
        count += 1;
    }
}, 6500);

}

非常感谢！

Answer 1

你应该隐藏/显示容器，而不是其中的元素。

Fiddle

.slider > div {
  display: none;
}

我的内容滑块无法正常工作

1 个答案: