$("#text_slider div:gt(0)").hide();
setInterval(function() {
$("#text_slider div:first")
.fadeOut(500).next().fadeIn(500).end().appendTo("#text_slider");
},5000);
我的html代码是
<body>
<div id="text_slider">
<div><p>First Text</p></div>
<div><p>Second Text</p></div>
<div><p>Third Text</p></div>
</div>
<script src="C:\Users\bonny\Documents\samples sites\jquery\jquery.js"> </script>
<script src="1.js"></script>
</body>
我的CSS
#text_slider{
width:600px;
height:300px;
margin:100px auto;
box-shadow:0 0 5px 5px #000;
}
#text_slider div {
position:absolute;
}
#text_slider p{
margin:20px;
font-size:30px;
}
我正在使用jquery构建文本滑块，并看到上面的jquery代码已在教程中成功使用，但是我很难理解它的工作原理，这就是我所知道的：第一个语句隐藏了所有文本（所有3个子div）以防止它们在开始时彼此堆叠。首先，fadeOut函数在“ first text” div上移动，然后移至其同级（我认为？）“ Second Text” div，“ second text” div在500ms内渐隐。然后end（）将属性重定向到容器div。（但是在那之后我对程序其余部分的工作方式一无所知。在上面的代码中Append做了什么。
如果上面的解释在某处有误，请纠正我。我仍然是新手。
$("#text_slider div:gt(0)").hide();-隐藏除“第一个”之外的所有属于“ text_slider” div子级的div。那:gt(0)部分。
setInterval(function, 5000) 表示每5秒运行一次函数中的代码。
$("#text_slider div:first") 查找作为“ text_slider”的子级的第一个div
.fadeOut(500) 淡出1/2秒。
.next() 移到下一个兄弟姐妹。
.fadeIn(500) 在1/2秒内消失在同级中
.end() 返回到此链中最初选择的元素或第一个子div。
.appendTo("#text_slider");将第一个子div追加到末尾，基本上对其进行重新排序并使其成为最后一个子div。其他人按顺序向上移动。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句