如何创建按钮并使其在幻灯片中工作？ [英] How to create buttons and make it work in a slideshow?

问题描述

我开始在Weebly制作我的网站，并且我想在首页上放映幻灯片，但我不喜欢Weebly提供的拖放幻灯片，因此我决定在HTML和CSS中构建一个幻灯片。我已经制作了这段代码，现在它可以作为自动幻灯片...我如何创建按钮并使其在我创建的幻灯片中工作？以下是我所做的代码：

I started making my website in Weebly and I wanted to have a slideshow in the front page but I didn't like the drag and drop slideshow provided by Weebly, so I decided to build one in HTML and CSS. I have made this code and now it works as an automatic slideshow... How can I create buttons and make it work in the slideshow I created? Here is the code I've done:

<div class="slider" id="main-slider">
    <!-- outermost container element -->
    <div class="slider-wrapper">
        <!-- innermost wrapper element -->
        <img src="http://lorempixel.com/1024/400/animals" alt="First" class="slide" style="width:100%" />
        <!-- slides -->
        <img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" style="width:100%" />
        <img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" style="width:100%" />
    </div>
</div>
<script type="text/javascript">
(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);

            }, 3000);
        },
        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>

CSS：

CSS:

html, body {
    margin: 0;
    padding: 0;
}
.slider {
    width: 100 % ;
    margin: 2e m auto;

}

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

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

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

推荐答案

他们是适当的类名。您当然必须定位这些按钮，但是如果没有您的HTML，我们无法为实际的按钮定位提供方向。如果您需要帮助，请提供您的HTML和所有与Slider元素相关的CSS。

Just create two buttons and give them the proper classname. You will of course have to position the buttons, but without your HTML it is not possible for us to provide direction on the actual button positioning. If you need help beyond that - please provide your HTML and all CSS that pertains to the Slider element.

 <div class="button slider-previous">Prev</div>
 <div class="button slider-next">Next</div>

这篇关于如何创建按钮并使其在幻灯片中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！