我是 jquery 的新手。整个早上我都在尝试为幻灯片编写不同时间的旋转木马，但我做不到。 你能帮帮我吗？
我有一个带有这段代码的 html，这只是一个例子，我将用 PHP 输出它。
<head>
<style>
.carousel {
width: 500px;
height: 500px;
}
[class^="content"] {
width: 500px;
height: 500px;
position: absolute;
}
.content1 {
background-color: #FF0000;
}
.content2 {
background-color: #FFFF00;
}
.content3 {
background-color: #0000FF;
}
.content4 {
background-color: #FF66aa;
}
</style>
</head>
<div class="carousel">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
</div>
JQUERY
//Array with the name of the classes (PHP values)
var div = ["content1", "content2", "content3", "content4"];
//Array with different time for each slide (PHP values)
var times = [5000, 10000, 20000, 30000];
var counter = 0;
var maxCount = div.length;
我尝试过类似的东西(我使用了警报，但我想更改单个类的 z-index)，但不起作用:
function timer(sec, counter){
var ciclo = function(){
return function() {
if (counter > 1) {
window.setTimeout(timer(times[counter-1], counter-1), times[counter-1]);
alert(counter + " " + times[counter-1] );
}
else if (counter <= 1) {
window.setTimeout(timer(times[maxCount-1], maxCount), times[maxCount-1]);
alert(counter + " " + times[counter-1]);
}
}
}
window.setTimeout(ciclo());
}
timer(5000, maxCount);
我可以看到警报消息，但他们不遵守时间。
在此先感谢您的帮助。
最佳答案
今天我又玩了一遍代码，解决了这个问题。 我稍微改变了逻辑；我决定不改变单个div的z-index，而是只创建一个div并改变里面的内容。
这是我的代码
HTML
<!doctype html>
<html>
<head>
<style>
.carousel {
width: 500px;
height: 500px;
}
[class^="content"] {
width: 500px;
height: 500px;
position: absolute;
color: #FFFFFF;
}
.content {
background-color: #FF0000;
z-index: 1;
}
</style>
</head>
<body>
<div class="carousel">
<div class="content"></div>
</div>
[...]
JQUERY
//Array with the content inside each div (PHP)
var div = Array();
div[0] = "<p style=\"font-size:16px;\"> Test 0 </p><p style=\"font-size:36px;\"> Some text here </p>";
div[1] = "<p style=\"font-size:16px;\"> Test 1 </p><p style=\"font-size:36px;\"> Some other text </p>";
div[2] = "<p style=\"font-size:16px;\"> Test 2 </p><p style=\"font-size:36px;\"> Here we go </p>";
div[3] = "<p style=\"font-size:16px;\"> Test 3 </p><p style=\"font-size:36px;\"> Boooom!! </p>";
//Array with different times for each div (PHP)
var times = [5000, 10000, 20000, 30000];
var maxCount = div.length - 1;
var funzione = function(time) {
var timer = function(counter) {
if (counter === undefined ) {
var counter = 0;
} else if (counter > maxCount) {
counter = 0
}
//alert(counter);
//$(".content1").empty().append("<p style=\"font-size:36px;\"> " + counter + " </p>");
$(".content").empty().append(div[counter]);
$(".content").append(times[counter]);
counter++;
window.setTimeout(function(){timer(counter)} , times[counter-1]);
}
window.setTimeout(function(){timer()} , time);
}
funzione(0);
我确信这段代码可以变得更短更好，但我希望能帮助那里的人 ;)
关于jquery - 带有 div 和幻灯片可变秒数的轮播循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48788426/