Question

我是javascript的新手，所以这是我的问题。我正在使用html css和javaScript制作三张图片的幻灯片。但它始终与第二张图像一起开始。

这是我的代码：

var slideIndex=0;
window.onload=showSlides;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

Answer 1

1）您的功能使用不正确。你使用它两次：

package com.company

import com.google.common.collect.ImmutableMap;
import io.undertow.client.ClientCallback;
import io.undertow.client.ClientConnection;
import io.undertow.client.UndertowClient;
import io.undertow.server.HttpServerExchange;
import io.undertow.server.ServerConnection;
import io.undertow.server.handlers.proxy.ProxyCallback;
import io.undertow.server.handlers.proxy.ProxyClient;
import io.undertow.server.handlers.proxy.ProxyConnection;
import org.xnio.IoUtils;
import org.xnio.OptionMap;

import java.io.IOException;
import java.net.URI;
import java.util.concurrent.TimeUnit;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 * Start the ReverseProxy with an ImmutableMap of matching endpoints and a default
 * 
 * Example:
 * mapping: ImmutableMap("api" -> "http://some-domain.com")
 * default: "http://default-domain.com"
 * 
 * Request 1: localhost:8080/foo -> http://default-domain.com/foo
 * Request 2: localhost:8080/api/bar -> http://some-domain.com/bar
 */

public class ReverseProxyClient implements ProxyClient {
    private static final ProxyTarget TARGET = new ProxyTarget() {};

    private final UndertowClient client;
    private final ImmutableMap<String, URI> mapping;
    private final URI defaultTarget;

    public ReverseProxyClient(ImmutableMap<String, URI> mapping, URI defaultTarget) {
        this.client = UndertowClient.getInstance();
        this.mapping = mapping;
        this.defaultTarget = defaultTarget;
    }

    @Override
    public ProxyTarget findTarget(HttpServerExchange exchange) {
        return TARGET;
    }

    @Override
    public void getConnection(ProxyTarget target, HttpServerExchange exchange, ProxyCallback<ProxyConnection> callback, long timeout, TimeUnit timeUnit) {
        URI targetUri = defaultTarget;

        Matcher matcher = Pattern.compile("^/(\\w+)(/.*)").matcher(exchange.getRequestURI());
        if (matcher.find()) {
            String firstUriSegment = matcher.group(1);
            String remaininguri = matcher.group(2);
            if (mapping.containsKey(firstUriSegment)) {
                // If the first uri segment is in the mapping, update the targetUri
                targetUri = mapping.get(firstUriSegment);
                // Strip the request uri from the part that is used to map upon.
                exchange.setRequestURI(remaininguri);
            }
        }

        client.connect(
            new ConnectNotifier(callback, exchange),
            targetUri,
            exchange.getIoThread(),
            exchange.getConnection().getByteBufferPool(),
            OptionMap.EMPTY);
    }

    private final class ConnectNotifier implements ClientCallback<ClientConnection> {
        private final ProxyCallback<ProxyConnection> callback;
        private final HttpServerExchange exchange;

        private ConnectNotifier(ProxyCallback<ProxyConnection> callback, HttpServerExchange exchange) {
            this.callback = callback;
            this.exchange = exchange;
        }

        @Override
        public void completed(final ClientConnection connection) {
            final ServerConnection serverConnection = exchange.getConnection();
            serverConnection.addCloseListener(serverConnection1 -> IoUtils.safeClose(connection));
            callback.completed(exchange, new ProxyConnection(connection, "/"));
        }

        @Override
        public void failed(IOException e) {
            callback.failed(exchange);
        }
    }
}

相反，请使用其中一个。

2）每当执行功能时，它都可以跳转到第二个图像。如果是这样，只需从window.onload=showSlides; showSlides();起始索引开始，而不是-1。

使用JavaScript进行幻灯片放映

1 个答案: