$("#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 构建一个文本 slider ，并看到上面的 jquery 代码在教程中成功使用，但我很难理解它是如何工作的。这是我所知道的: 第一条语句隐藏所有文本(所有 3 个子 div)，以防止它们在开始时彼此堆叠。 首先，fadeOut 函数在“第一个文本”div 上移动，然后移动到其同级(我认为？)“第二个文本”div ，“第二个文本”div 在 500 毫秒内淡出。然后 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 附加到末尾，基本上是对其重新排序并使其成为最后一个子元素。其他人按顺序向上移动。
关于javascript - 了解 jQuery slider 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35024122/