Question

我试图将图片幻灯片放映到基本网站。我使用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)

我的layout.jade文件包含html代码：

.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')

Answer 1

您需要围绕函数名称引用，如此...

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

使用Html，Css和amp;创建图像幻灯片玉

1 个答案: