使用 Html、Css 和 Jade 创建图像幻灯片答案

【问题标题】：Create Image Slideshow with Html, Css & Jade使用 Html、Css 和 Jade 创建图像幻灯片
【发布时间】：2018-01-09 22:08:43
【问题描述】：

我正在尝试将图像幻灯片放映添加到基本网站。我使用Node.js 和jade 作为模板引擎。

站点在本地主机中崩溃并显示以下消息：

    TypeError: D:\Workspace\websites\actWebsite\views\layout.jade:42
    40|                     img.slide-images(src='/images/slide_four.jpg')

    41| 

  > 42|                 a.prev(onclick=plusSlide(-1)) &#10094;

    43|                 a.next(onclick=plusSlide(+1)) &#10095;

    44| 

    45|             .centered-indicators


     plusSlide is not a function
    at eval (eval at exports.compile (D:\Workspace\websites\actWebsite\node_modules\jade\lib\index.js:218:8), <anonymous>:236:39)
    at eval (eval at exports.compile (D:\Workspace\websites\actWebsite\node_modules\jade\lib\index.js:218:8), <anonymous>:306:22)
    at res (D:\Workspace\websites\actWebsite\node_modules\jade\lib\index.js:219:38)
    at Object.exports.renderFile (D:\Workspace\websites\actWebsite\node_modules\jade\lib\index.js:380:38)
    at Object.exports.renderFile (D:\Workspace\websites\actWebsite\node_modules\jade\lib\index.js:370:21)
    at View.exports.__express [as engine] (D:\Workspace\websites\actWebsite\node_modules\jade\lib\index.js:417:11)
    at View.render (D:\Workspace\websites\actWebsite\node_modules\express\lib\view.js:135:8)
    at tryRender (D:\Workspace\websites\actWebsite\node_modules\express\lib\application.js:640:10)
    at Function.render  
 (D:\Workspace\websites\actWebsite\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render 

   (D:\Workspace\websites\actWebsite\node_modules\express\lib\response.js:1008:7)

我的带有 html 代码的 layout.jade 文件：

.container
        .carousel-container
            .mySlides.fade
                img.slide-images(src='/images/slide_one.jpg')
            .mySlides.fade
                img.slide-images(src='/images/slide_two.jpg')
            .mySlides.fade
                img.slide-images(src='/images/slide_three.jpg')
            .mySlides.fade
                img.slide-images(src='/images/slide_four.jpg')

            a.prev(onclick=plusSlide(-1)) &#10094;  // crash starts from here
            a.next(onclick=plusSlide(+1)) &#10095;

        .centered-indicators
            span.indicator(onclick=currentSlide(1))
            span.indicator(onclick=currentSlide(2))
            span.indicator(onclick=currentSlide(3))
            span.indicator(onclick=currentSlide(4))
    block content

这是我处理幻灯片的外部js文件代码：

var slideIndex = 1;

showSlides(slideIndex);

function plusSlide(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(n);
}

function showSlides(n){
    let i;
    let slides = document.getElementsByClassName('mySlides');
    let indicators = document.getElementsByClassName('indicators');

// if greater than total no of slides reset slide index to first slide
    if (n > slides.length) {
        slideIndex = 1;
    } else if (n < 1) { // reset slide index to length of all the slides
        slideIndex = slides.length;
    }

    //loop thru the slides n remove their display ppty
    for (i = 0; i < slides.length; i++){
        slides[i].style.display = 'none';
    }

    for (i = 0; i < indicators.length; i++){
        indicators[i].className = indicators[i].className.replace(" active", "");
    }

    slides[slideIndex - 1].style.display = 'block';
    indicators[slideIndex - 1].className += " active";

}

有人可以指出我的 slide_four 图像有什么问题吗？我已经正确链接了 js 文件，并且调用了所有函数，但它崩溃了。小鬼：

doctype
   html
      head
         title #{title}
         link(rel='stylesheet', href='/stylesheets/main.css')
         script(type='text/javascript', src='/public/scripts/carousel.js')

【问题讨论】：

标签： javascript html css node.js pug

【解决方案1】：

你需要像这样在函数名周围加上引号......

a.prev(onclick="plusSlide(-1)") &#10094;

【讨论】：

感谢工作，但图像未显示。出了什么问题？
呃，有时您必须自己解决问题。 :)