Question

所以我知道有很多这样的事情，我尽可能多地经历过。

它在JSFiddle中有效，因为小提琴正在为我自动执行onload。

我在Chrome / IE / FireFox的本地驱动器上打开我的html脚本，谢天谢地，布局和颜色都很准确但我的Javascript没有加载。

我的文件夹结构已正确完成，我已经进行了三次检查。

我在标记之前的html文档末尾声明了我的.js脚本。

我尝试使用onclick函数在html文档中打开一个新窗口并且可以正常工作

尝试从html文件到js文件的相同onclick功能，不起作用。我很茫然。

现在我确定无关紧要，但实际上只是意味着它。我正在使用Sublime Text 2进行编码。

当我将鼠标悬停在网页上的箭头上时，我的鼠标会变成一只手，所以看起来它确实将箭头检测为可点击的图标/按钮，但幻灯片不会更改为下一张图像。

HTML：

<!doctype html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="warSupport.css" rel="stylesheet">
    <link href="warMain.css" rel="stylesheet">
  </head>

/受Javascript代码

影响的HTML部分

<div class="slider-nav"> <a href="#" class="arrow-prev"><img src="./Images/Buttons/arrow-prev.png"></a>
    <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
    </ul> <a href="#" class="arrow-next"><img src="./Images/Buttons/arrow-next.png"></a>
</div>

/ HTML文档结尾/

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script src="warCode.js"></script>
</body>

</html>

Javascript代码

var main = function () {

    $('.arrow-next').click(function () {
        var curSlide = $('.active-slide');
        var nexSlide = curSlide.next();
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        if (nexSlide.length == 0) {
            nexSlide = $('.slide').first();
        };

        if (nextDot.length == 0) {
            nextDot = $('.dot').first();
        }
        curSlide.fadeOut(600).removeClass('active-slide');
        nexSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
    });

    $('.arrow-prev').click(function () {
        var curSlide = $('.active-slide');
        var prevSlide = curSlide.prev();
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        if (prevSlide.length == 0) {
            prevSlide = $('.slide').last();
        }

        if (prevDot.length == 0) {
            prevDot = $('.dot').last();
        }

        curSlide.fadeOut(500).removeClass('active-slide');
        prevSlide.fadeIn(500).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');


    });



};

$(document).ready(main);

受影响的HTML部分的CSS代码

/* Carousel */
 .slider {
    position: relative;
    width: 100%;
    height: 470px;
    border-bottom: 1px solid #ddd;
}
.slide {
    background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
    background-size: cover;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.active-slide {
    display: block;
}
.slide-copy h1 {
    color: #363636;
    font-family:'Oswald', sans-serif;
    font-weight: 400;
    font-size: 40px;
    margin-top: 105px;
    margin-bottom: 0px;
}
.slide-copy h2 {
    color: #b7b7b7;
    font-family:'Oswald', sans-serif;
    font-weight: 400;
    font-size: 40px;
    margin: 5px;
}
.slide-copy p {
    color: #959595;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15em;
    line-height: 1.75em;
    margin-bottom: 15px;
    margin-top: 16px;
}
.slide-img {
    text-align: center;
}
/* Slide feature */
 .slide-feature {
    text-align: center;
    background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
    height: 470px;
}
.slide-feature img {
    margin-top: 112px;
    margin-bottom: 28px;
}
.slide-feature a {
    display: block;
    color: #6fc5e0;
    font-family:"HelveticaNeueMdCn", Helvetica, sans-serif;
    font-family:'Oswald', sans-serif;
    font-weight: 400;
    font-size: 20px;
}
.slider-nav {
    text-align: center;
    margin-top: 20px;
}
.arrow-prev {
    margin-right: 45px;
    display: inline-block;
    vertical-align: top;
    margin-top: 9px;
}
.arrow-next {
    margin-left: 45px;
    display: inline-block;
    vertical-align: top;
    margin-top: 9px;
}
.slider-dots {
    list-style: none;
    display: inline-block;
    padding-left: 0;
    margin-bottom: 0;
}
.slider-dots li {
    color: #bbbcbc;
    display: inline;
    font-size: 30px;
    margin-right: 5px;
}
.slider-dots li.active-dot {
    color: #363636;
}

谢谢你的时间。

Answer 1

您似乎在文档末尾的不同CDN中导入了两次jQuery。这可能是问题所在。

Javascript没有在HTML文档中加载

1 个答案: