gpt4 book ai didi

jquery - 横幅淡入淡出插件无法正常工作 JQuery

转载 作者:行者123 更新时间:2023-11-28 02:59:26 24 4
gpt4 key购买 nike

我正在使用 jquery 制作淡入淡出横幅。我得到了一个输出,但它没有正常工作。

第一个图像淡出但不是第二个图像淡入..直接弹出第 3 个图像。

我检查了控制台,没有显示任何错误。

请查看我的代码并相应地帮助我。

HTML

<!DOCTYPE html>
<html>
<head>
<title>image slider</title>
<link rel="stylesheet" type="text/css" href="banner.css">
</head>
<body>
<div class="banner">
<div class="banner_divs"></div>
<div class="banner_divs"></div>
<div class="banner_divs"></div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="banner.js"></script>
</body>
</html>

CSS

.banner{
position: relative;
height: 400px;
border: 1px solid;
}
.banner_divs{
position: absolute;
border: 1px solid;
height: 400px;
width: 700px;
}
.banner_divs:nth-child(1){
background-image: url("images/banner1.jpg");
}
.banner_divs:nth-child(2){
background-image: url("images/banner2.jpg");
}
.banner_divs:nth-child(3){
background-image: url("images/banner3.jpg");
}

JQuery

$(document).ready(function(){

$(".banner_divs:not(:first)").hide();
setInterval(function(){

$(".banner_divs:first").fadeOut().next().fadeIn().end().appendTo(".banner");

},3000);

});

最佳答案

您可以按照以下方式更改图像。

$(document).ready(function(){

var tid = setTimeout(timer, 3000);
var $first = $('div:first', '.banner'),
$last = $('div:last', '.banner');

function timer() {
$selected = $(".selected");
$next = $selected.next('.banner_divs').length ? $selected.next('.banner_divs') : $first;
$selected.removeClass("selected").fadeOut('fast');
$next.addClass('selected').fadeIn('fast');
tid = setTimeout(timer, 3000);
}
function abortTimer() {
clearTimeout(tid);
}

});

并将display:none;赋给.banner_divs并使用

.selected{
display:block;
}

Working Fiddle

Reference Link

关于jquery - 横幅淡入淡出插件无法正常工作 JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35308618/

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