Question

如何在不点击的情况下实现某种滑块？以下是JSFIDDLE的示例。

从示例中，我们必须单击图像才能查看下一个内容。但我想要的是，它要淡入并等待5秒钟，然后淡出到下一个内容。

我是否必须在此处更改javascript中的任何内容？：

$('#two, #three').hide();
$('.slide').click(function(){
    $(this).fadeOut().next().fadeIn();
});

我是新手。请指导我。非常感谢提前！

Answer 1

试试这段代码。我希望这有帮助......

setInterval(function() {
  $("#fade").fadeToggle();
}, 1500);

<div id="fade" style="background-color:#66FFFF;width:500px;
height:100px;text-align:center;">
  This text should fade in and out
</div>

这是jsfiddle工作链接。检查一下： - http://jsfiddle.net/emgee/4QJeG/7/

Answer 2

您可以使用链式事件在另一个结束时触发一个事件，并使用$crop = array( 'center', 'center' ); resize( $max_w, $max_h, $crop);函数使事件“等待”发生：

delay()

$('#two, #three').hide();

$(document).ready(function() {
    $("#one").delay(10000).fadeOut("slow", function(){ // first animation delayed 10 secs
        $(this).next().fadeIn("slow", function(){
            $(this).delay(2500).fadeOut("slow", function(){
                $(this).next().fadeIn("slow");
            });          
        });
    });
});

#pic {
    width:460px;
    height:300px;
    margin:0 20px 0 20px;
    overflow:hidden;
}
.slide {
    width:460px;
    height:300px;
}
#one {
    background:url('http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png') no-repeat;
}
#two {
    background:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png') no-repeat;
}
#three {
    background:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/3D-Studio-Max-icon.png') no-repeat;
}
#one {
    position: absolute;
    margin-top:50px;
}
#one .tooltip-content {
    display: none;
    position: absolute;
    bottom:100%;
    left:0;
    right: 5%;
    background-color:aquamarine;
    padding:;
}
#one:hover .tooltip-content {
    display: block;
}
#one .tooltip-content2 {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right: 5%;
    background-color:bisque;
    padding:;
}
#one:hover .tooltip-content2 {
    display: block;
}
#two {
    position: absolute;
    margin-top:50px;
}
#two .tooltip-content {
    display: none;
    position: absolute;
    bottom:100%;
    left:0;
    right: 5%;
    background-color:goldenrod;
    padding:;
}
#two:hover .tooltip-content {
    display: block;
}
#two .tooltip-content2 {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right: 5%;
    background-color:coral;
    padding:;
}
#two:hover .tooltip-content2 {
    display: block;
}
#three {
    position: absolute;
    margin-top:50px;
}
#three .tooltip-content {
    display: none;
    position: absolute;
    bottom:100%;
    left:0;
    right: 5%;
    background-color:darksalmon;
    padding:;
}
#three:hover .tooltip-content {
    display: block;
}
#three .tooltip-content2 {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    right: 5%;
    background-color:darkseagreen;
    padding:;
}
#three:hover .tooltip-content2 {
    display: block;
}

修改

您可以将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pic"> <div id="one" class="slide"> <div class="tooltip-content"> <p>Here is some content for the tooltip</p> </div> <div class="tooltip-content2"> <p>Lorem ipsum</p> </div> </div> <div id="two" class="slide"> <div class="tooltip-content"> <p>Here is some content for the tooltip</p> </div> <div class="tooltip-content2"> <p>Lorem ipsum</p> </div> </div> <div id="three" class="slide"> <div class="tooltip-content"> <p>Here is some content for the tooltip</p> </div> <div class="tooltip-content2"> <p>Lorem ipsum</p> </div> </div> </div>功能的参数调整为您喜欢的任何毫秒数。

<强> EDIT2

要在页面加载后立即运行函数，您可以使用JQuery的delay()。

FIDDLE

Answer 3

您需要使用JS setInterval方法每5秒调用一次更改：

setInterval(function(){
    $('.slide').fadeOut().next().fadeIn();
}, 5000);

更新的JSFIDDLE：http://jsfiddle.net/ghorg12110/e40ct6sn/2/

Answer 4

将javascript代码放在5秒的setinterval函数中，就像这样下面是一个jsfiddle工作样本http://jsfiddle.net/elviz/e40ct6sn/8/

           $('#two, #three').hide();
              setInterval(function(){ $('.slide').fadeOut().next().fadeIn(); 
               $('.tooltip-content, .tooltip-content2').show();
            }, 5000);

淡出＆amp; Out Interval

4 个答案: