Question

谢谢您抽出宝贵的时间来研究我的问题！

我正在尝试为我的网站制作一个简单的幻灯片，我在https://codepen.io上遇到了这个示例。

以下是示例的链接：https://codepen.io/gabrieleromanato/pen/dImly

我想更新此示例，以便可以在用户可以单击的每张幻灯片中放置一个链接。
我尝试通过以下方法做到这一点：https://codepen.io/jjaacckk/pen/PdmPQW

<html>

<head>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .slider {
            width: 1024px;
            margin: 2em auto;

        }

        .slider-wrapper {
            width: 100%;
            height: 400px;
            position: relative;
        }

        .slide {
            float: left;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 3s linear;
        }

        .slider-wrapper>.slide:first-child {
            opacity: 1;
        }

    </style>
    <script>
        (function() {
            function Slideshow(element) {
                this.el = document.querySelector(element);
                this.init();
            }
            Slideshow.prototype = {
                init: function() {
                    this.wrapper = this.el.querySelector(".slider-wrapper");
                    this.slides = this.el.querySelectorAll(".slide");
                    this.previous = this.el.querySelector(".slider-previous");
                    this.next = this.el.querySelector(".slider-next");
                    this.index = 0;
                    this.total = this.slides.length;
                    this.timer = null;
                    this.action();
                    this.stopStart();
                },
                _slideTo: function(slide) {
                    var currentSlide = this.slides[slide];
                    currentSlide.style.opacity = 1;

                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides[i];
                        if (slide !== currentSlide) {
                            slide.style.opacity = 0;
                        }
                    }
                },
                action: function() {
                    var self = this;
                    self.timer = setInterval(function() {
                        self.index++;
                        if (self.index == self.slides.length) {
                            self.index = 0;
                        }
                        self._slideTo(self.index);
                    }, 5000);
                },
                stopStart: function() {
                    var self = this;
                    self.el.addEventListener("mouseover", function() {
                        clearInterval(self.timer);
                        self.timer = null;
                    }, false);
                    self.el.addEventListener("mouseout", function() {
                        self.action();
                    }, false);
                }
            };
            document.addEventListener("DOMContentLoaded", function() {
                var slider = new Slideshow("#main-slider");
            });
        })();

    </script>
</head>

<body>
    <div class="slider" id="main-slider">
        <div class="slider-wrapper">
            <div class="slide">
                <img src="https://lorempixel.com/1024/400/animals">
                <a target="_blank" href="https://google.com">click here</a>
            </div>
            <div class="slide">
                <img src="https://lorempixel.com/1024/400/business">
                <a target="_blank" href="https://apple.com">click here</a>
            </div>
            <div class="slide">
                <img src="https://lorempixel.com/1024/400/city">
                <a target="_blank" href="https://facebook.com">click here</a>
            </div>
        </div>
    </div>
</body>

</html>

但是问题是，“单击此处”按钮始终使用最后一张幻灯片的链接，而不管用户实际在看哪张幻灯片（在这种情况下，它始终是facebook.com）。如您所知，我对js不太了解，也无法弄清楚如何使每张幻灯片的链接都可点击，具体取决于用户所在的幻灯片。

非常感谢您，
杰克

JS幻灯片：无法使用除最后一张幻灯片以外的各张幻灯片上的链接

0 个答案: