Question

我找到了一个关于如何使用jquery幻灯片效果的例子，但是我试图修改它，所以它不会滑动所有的div，但只有一个带有某个名称的类，我称之为：slide。

它第一次工作，但是后面的子div被一个空白页面取代，直到下一个类div显示..如何在jquery中更正这个？

我接下来（＆＃34; div＆＃34;）改为下一个（＆＃34; div.slide＆＃34;），我认为这是唯一需要的东西......

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .yourContainer{ position:relative; }
        .yourContainer div{ position:absolute; hight:300px; width:300px; }
    </style>

    <script type="text/javascript" charset="utf-8" src="jq/jquery-1.11.1.js"></script>
    <script type="text/javascript" charset="utf-8" src="jq/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
    <div class="yourContainer">
        <div class="slide" style="background:red;">some html
             <div style="background:pink;">noooo</div>
        </div>
        <div class="slide" style="background:yellow;">Other HTML</div>
        <div class="slide" style="background:blue;">4 HTML</div>
        <div class="slide" style="background:green;">5 HTML</div>
    </div>

    <script>
        $(function(){
    $('.yourContainer div:gt(0)').hide();
    setInterval(function(){$('.yourContainer :first-child').fadeOut(1000).next("div.slide").fadeIn(400).end().appendTo('.yourContainer');}, 3000);
});
    </script>
</body>
</html>

Answer 1

您可以同时启动两个动画，因此效果会更好。这是您想要实现的更好的版本。

这是一个演示：JS Fiddle Demo

function nextSlide() {
    var container = $('.yourContainer'),
    // Your current slide jQuery element
        current_slide = container.children().first(),
    // Next sibling (slide) of current slide
        next_slide = current_slide.next();

    current_slide.fadeOut(1000);
    next_slide.fadeIn(1000, function () {
        // Append current_slide to the end of container
        // so it can move to the slide when interval has been fired again.
        current_slide.appendTo(container);
    });
}

$(document).ready(function () {
    // Start slider
    $('.yourContainer').children().hide().first().show();
    // Intervally move to the next slide
    setInterval(nextSlide, 3000);
});

滑动HTML内容

1 个答案: