gpt4 book ai didi

javascript - 理解 jQuery slider 函数

转载 作者:行者123 更新时间:2023-11-29 18:00:58 25 4
gpt4 key购买 nike

  $("#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() 将属性重定向到container 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。其他依次上移。

关于javascript - 理解 jQuery slider 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35024122/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com