Javascript 淡入&;间隔外

Javascript 淡入&;间隔外,javascript,html,css-transitions,fadein,fadeout,Javascript,Html,Css Transitions,Fadein,Fadeout,如何在不点击的情况下实现类似滑块的效果?这是一个来自中国的样品 从示例中,我们必须单击图像以查看下一个内容。但我想要的是,让它淡入并等待5秒钟,然后淡出到下一个内容 我必须在这里更改javascript中的任何内容吗 $('#two, #three').hide(); $('.slide').click(function(){ $(this).fadeOut().next().fadeIn(); }); 我是新来的。请引导我。非常感谢 试试这段代码。我希望这有助于 setInterv

如何在不点击的情况下实现类似滑块的效果?这是一个来自中国的样品

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

我必须在这里更改javascript中的任何内容吗

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

我是新来的。请引导我。非常感谢

试试这段代码。我希望这有助于

setInterval(函数(){
$(“#淡入”).fadeToggle();
}, 1500);

这段文字应该淡入淡出

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

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

更新的JSFIDLE:

您可以使用链式事件在另一个事件结束后触发一个事件,并使用
delay()
函数使事件“等待”发生:

$('two,'two').hide();
$(文档).ready(函数(){
$(“#一”).延迟(10000).淡出(“慢”,function(){//第一个动画延迟10秒
$(this).next().fadeIn(“slow”,function()){
$(此).delay(2500).fadeOut(“慢”,函数(){
$(this.next().fadeIn(“slow”);
});          
});
});
});
#pic{
宽度:460px;
高度:300px;
利润率:0.20px 0.20px;
溢出:隐藏;
}
.幻灯片{
宽度:460px;
高度:300px;
}
#一个{
背景:url('http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png")不重复;;
}
#两个{
背景:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png")不重复;;
}
#三{
背景:url('http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/3D-Studio-Max-icon.png")不重复;;
}
#一个{
位置:绝对位置;
边缘顶部:50px;
}
#一、工具提示内容{
显示:无;
位置:绝对位置;
底部:100%;
左:0;
右:5%;
背景颜色:海蓝宝石;
衬垫:;
}
#一:悬停。工具提示内容{
显示:块;
}
#一、工具提示-content2{
显示:无;
位置:绝对位置;
最高:100%;
左:0;
右:5%;
背景色:深蓝色;
衬垫:;
}
#一:悬停。工具提示-content2{
显示:块;
}
#两个{
位置:绝对位置;
边缘顶部:50px;
}
#二、工具提示内容{
显示:无;
位置:绝对位置;
底部:100%;
左:0;
右:5%;
背景颜色:黄花;
衬垫:;
}
#二:悬停。工具提示内容{
显示:块;
}
#二、工具提示-content2{
显示:无;
位置:绝对位置;
最高:100%;
左:0;
右:5%;
背景颜色:珊瑚;
衬垫:;
}
#二:悬停。工具提示-content2{
显示:块;
}
#三{
位置:绝对位置;
边缘顶部:50px;
}
#三、工具提示内容{
显示:无;
位置:绝对位置;
底部:100%;
左:0;
右:5%;
背景色:黑色;
衬垫:;
}
#三:悬停。工具提示内容{
显示:块;
}
#三、工具提示-内容2{
显示:无;
位置:绝对位置;
最高:100%;
左:0;
右:5%;
背景色:暗绿色;
衬垫:;
}
#三:悬停。工具提示-content2{
显示:块;
}

下面是工具提示的一些内容

同侧眼睑

下面是工具提示的一些内容

同侧眼睑

下面是工具提示的一些内容

同侧眼睑


将javascript代码放在5秒的setinterval函数中,如下所示 下面是一个JSFIDLE工作示例


这很好。但它仍然需要被点击,不是吗?是否可以在不单击的情况下自动将其更改为下一个内容?谢谢。@Farah,你想通过悬停触发它吗?或者单击以从第一个图像更改为第二个图像,并自动从第二个图像更改为第三个图像?我两者都需要。鼠标悬停效果(悬停图像以显示文本)以及图像自动更改为下一内容。酷!如果没有悬停效果呢?我是否仍然需要更改javascript或css?我的意思是,我希望它能够自动切换到下一个内容。thanks@Farah,您希望图像一出现在屏幕上就自动开始图像交换而不受用户的任何干扰吗?第二个内容丢失tho:(@Farah第一个和第二个内容显示在悬停上,可能您需要在悬停后滚动一点才能在小提琴中看到:)第二个内容在眨眼间弹出,然后消失了:o
           $('#two, #three').hide();
              setInterval(function(){ $('.slide').fadeOut().next().fadeIn(); 
               $('.tooltip-content, .tooltip-content2').show();
            }, 5000);