Question

我一直在尝试使用HTML 5，CSS和JS从this example.到我的Django应用程序在一页上添加多个幻灯片显示

我知道这段代码并不是要在一页上进行多个幻灯片显示的，但是，我似乎无法找到如何使其工作的方法。

更具体地说，当我添加第二个幻灯片时，它不会更改适当的图像库。

Answer 1

该脚本不是为了支持同一页面上的多个幻灯片而编写的，但是，如果您创建一个对象并传递包装的div的{{1}}，则可以使其正常工作。

id

HTML

function SlideShow(id) {
    this.container = document.getElementById(id);
    this.leftBtn = this.container.querySelector('.w3-display-left');
    this.rightBtn = this.container.querySelector('.w3-display-right');
    this.slideIndex = 1;
    var that = this;

    this.init = function() {
        this.showDivs(this.slideIndex);
    };
    this.plusDivs = function(n) {
        this.showDivs(this.slideIndex += n);
    };
    this.showDivs = function(n) {
        var x = this.container.getElementsByClassName("mySlides");
        if (n > x.length) {this.slideIndex = 1}    
        if (n < 1) {this.slideIndex = x.length}
        for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";  
        }
        x[this.slideIndex-1].style.display = "block";  
    };
    this.leftBtn.addEventListener('click', function() {
        that.plusDivs(-1);
    });
    this.rightBtn.addEventListener('click', function() {
        that.plusDivs(1);
    });
}

var foo = new SlideShow('foo');
foo.init();

var bar = new SlideShow('bar');
bar.init();

演示：http://jsfiddle.net/zwsmcn3q/31/

注意：幻灯片显示代码可以改进，但是超出了此答案的范围。

注意：您也可以使用ES6将其编写为类：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

在一页上添加多个图库

1 个答案: