我在jquery中有简单的幻灯片，我想自动运行

Question

如何在此代码中使用setinterval？我尝试了不同的方法，但它不起作用

这是我的HTML

<img id="picr" src="images/image1.jpg" width="400px" height="400px">
<div>
    <div id="prev">
        <input  type="button" id="testbutton" value="Prev" width="100px" height="100px">
    </div>
    <div id="next">
        <input type="button" id="testbutton" value="Next">
    </div>
</div>

这里是jquery，

$(document).ready(function () {
    // body...
    var pict =["images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
    var picNum=1;

    $("#prev, #next").mouseover(function(){

        $("#picr").slideUp(2000, function(){
            $("#picr").attr("src", pict[picNum]);
            picNum++;

            if (picNum>2){picNum=0;}


            $("#picr").fadeIn(2000);

        });

    });
});

如何在此代码中使用setinterval？我尝试了不同的方法，但它不起作用

Answer 1

要使用setInterval（）fun来运行自动，您必须创建函数：

function playSlider() {
   $("YourButtonNextElement").click();
   t = setInterval(function () { playSlider(); }, 4000);
}

并在$（document）.ready（）中调用playSlider（）fun

$(document).ready(function () {
    // body...
    var pict =["images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
    var picNum=1;

    $("#prev, #next").mouseover(function(){

        $("#picr").slideUp(2000, function(){
            $("#picr").attr("src", pict[picNum]);
            picNum++;

            if (picNum>2){picNum=0;}


            $("#picr").fadeIn(2000);

        });

    });
    playSlider();
});