JS Slideshow: невозможно использовать ссылки на отдельные слайды, кроме последнего слайда - PullRequest
Новая
       9

JS Slideshow: невозможно использовать ссылки на отдельные слайды, кроме последнего слайда

0 голосов
/ 03 сентября 2018

Спасибо, что нашли время посмотреть на мой вопрос!

Я пытаюсь сделать простое слайд-шоу для моего сайта, и я наткнулся на этот пример на 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 и не могу понять, как сделать ссылку на каждый слайд кликабельной, в зависимости от того, на каком слайде находится пользователь.

Большое спасибо,
Jack

...