Question

我是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);

我可以看到提醒信息，但他们不尊重时间。

提前感谢您的帮助。

Answer 1

今天我再次使用代码并解决问题。我改变了一点逻辑;我决定不改变单个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);

我确信这段代码会变得更短更好，但我希望可以帮助那些人;）

带有div的轮播循环和用于滑动的可变秒数

1 个答案: