Question

我有这样的功能，如果我点击屏幕的左侧或右侧，我可以循环浏览一系列图像。

我现在想添加一个计时器，每隔几秒就会增加一个计时器，然后切换到下一个图像。我仍然希望保留点击功能。实现这一目标的最佳方法是什么？

HTML

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="Javascript/imageclick.js"></script>
        <link rel="stylesheet" href="CSS/imgCSS.css">
    </head>
    <body id="imgClickAndChange" style="margin: 0px; background: url('./Images/furnace2.png'); background-size: contain;">
    <div>
       <div id="div-left" style="height: 100%; width: 50%; float: left" onclick="changeImageMinus()">
       </div>
        <div id="div-right" style="height: 100%; width: 50%; float: right" onclick="changeImagePlus()">
       </div>
    </div>
    </body>
</html>

的JavaScript

var counter = 0;

function changeImageMinus(){
    console.log("minus");
     counter--;
     if(counter == -1) {
        $("#imgClickAndChange").css("background", "url(./Images/furnace8.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter = 5;
        console.log(counter);
    }
    if(counter == 0){
        $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        console.log(counter);
    }
    else if(counter == 1){
       $("#imgClickAndChange").css("background", "url(./Images/furnace3.png)");
       $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 2){
        $("#imgClickAndChange").css("background", "url(./Images/furnace4.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 3){
        $("#imgClickAndChange").css("background", "url(./Images/furnace5.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 4){
        $("#imgClickAndChange").css("background", "url(./Images/furnace6.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 5){
        $("#imgClickAndChange").css("background", "url(./Images/furnace7.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 6){
        $("#imgClickAndChange").css("background", "url(./Images/furnace8.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
};

function changeImagePlus(){
    console.log("plus");
    counter++;
    if(counter == 0){
        $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 1){
        $("#imgClickAndChange").css("background", "url(./Images/furnace3.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 2){
        $("#imgClickAndChange").css("background", "url(./Images/furnace4.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 3){
        $("#imgClickAndChange").css("background", "url(./Images/furnace5.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 4){
        $("#imgClickAndChange").css("background", "url(./Images/furnace6.png)");
        $("#imgClickAndChange").css("background-size", "contain");

        console.log(counter);
    }
    else if(counter == 5){
        $("#imgClickAndChange").css("background", "url(./Images/furnace7.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        console.log(counter);
    }
    else if(counter == 6){
        $("#imgClickAndChange").css("background", "url(./Images/furnace8.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        console.log(counter);
    }
    else if(counter == 7){
        $("#imgClickAndChange").css("background", "url(./Images/furnace2.png)");
        $("#imgClickAndChange").css("background-size", "contain");
        counter = 0;
        console.log(counter);
    }
};

Answer 1

使用setTimeout(function, milliseconds);

这样的事情：

// call function after 4 seconds setTimeout( changeImagePlus, 4000 );

您可以在此处阅读更多相关信息： https://www.w3schools.com/js/js_timing.asp

与JavaScript一起使用的两个关键方法是：

setTimeout（function，milliseconds）等待后执行一个函数   指定的毫秒数。

setInterval（function，milliseconds）与setTimeout（）相同，但是会不断重复执行该函数。

您可能需要根据页面的内容来取消它。

Answer 2

首先，将当前图像的计数保留为int。您还希望将最小和最大计数保存为int。由于除了数字之外所有图像都具有相同的路径，因此这很容易做到。然后创建一个函数changeImage(increment)。它应该是这样的：

function changeImage(increment) {
    imageCount += increment;
    if (imageCount > MAX_COUNT) {
        imageCount = MIN_COUNT;
    else if (imageCount < MIN_COUNT) {
        imageCount = MAX_COUNT;
    }
    renderSlideshowImage(imageCount);
}

这将清理你已经获得的巨大代码。 renderSlideshowImage应该是这样的：

function renderSlideshowImage(image) {
    $("#imgClickAndChange").css("background", "url(./Images/furnace"+image+".png)");
}

现在，就超时而言，有一个点击处理程序和一个超时处理程序。每个处理函数都应该以适当的增量调用changeImage()。如果您愿意，甚至可以将超时保存为变量，只要单击该按钮，就可以将其重置。

myTimer = setTimeout(timeoutHandler, 4000);
clearTimeout(myTimer);

您可以做的另一件事就是在CSS文件中将#imgClickAndChange的CSS设置为background-size: contain，这样您就不需要继续设置它并保存$('#imgClickAndChange') in a variable ( $ changingImage = $（＆＃39;＃imgClickAndChange＆＃39;）`）所以你不需要继续设置它。

如何每隔几秒钟循环播放一系列图像，以及当我点击屏幕＆gt;

2 个答案: