我需要一些帮助来使用 jQuery 循环多个 div(3 个或更多)。我想要的外观是让我的主页将其主图像 div 与其他 div 一起旋转，以便背景图像(仅 div 的)以及包含在 div 中的链接发生变化。
我已经通过堆叠 CSS 并淡入后面的图像来创建效果，但是现在我还需要更改 div 中的链接。
这是该部分的 HTML -
<head>
<title>Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>
现在我要更改的 Div
<div class="jumbotron-1">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p>
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>
</div>
</div>
<div class="jumbotron-2">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p>
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>
</div>
</div>
<div class="jumbotron-3">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p>
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>
</div>
</div>
我找到了与我想要的类似的代码:
var slideShowDivs = ['.jumbrotron-1', '.jumbotron-2', '.jumbotron-3'];
var currentID = 0;
var slideShowTimeout = 1000;
$(document).ready(function() {
for (var i = 1; i < slideShowDivs.length; i++) $(slideShowDivs[i]).hide();
setTimeout(slideShowChange, slideShowTimeout);
});
function slideShowChange() {
var nextID = currentID + 1;
if (nextID >= slideShowDivs.length) nextID = 0;
$(slideShowDivs[currentID]).stop(true).fadeOut(400);
$(slideShowDivs[nextID]).stop(true).fadeIn(400, function() {
setTimeout(slideShowChange, slideShowTimeout);
});
currentID = nextID;
}
但是好像不行。
还有什么想法吗？
最佳答案
尝试 jquery 每个 insted 的 for 循环
$('.jumbrotron-1,.jumbotron-2,.jumbotron-3').each(function() {
$(this).hide();
setTimeout(slideShowChange, slideShowTimeout);
});
jsfiddle:http://jsfiddle.net/66Lz2xou/2/
或
$('div[class^="jumbrotron"]').each(function() {
$(this).hide();
setTimeout(slideShowChange, slideShowTimeout);
});
关于javascript - 如何使用 jQuery 循环 3 个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29934730/