JavaScript沒有鏈接HTML文件

我想創建一個滑塊使用jQuery，但我有困難鏈接我的JavaScript文件到我的HTML。我檢查了語義錯誤，但似乎找不到任何錯誤。有沒有問題的CSS - 只有JavaScript似乎不工作。JavaScript沒有鏈接HTML文件

<!doctype html> 
<head> 
<title> 
content slider 
</title> 

<link rel="stylesheet" href="css/style.css"> 
<script type="text/javascript" src = "jquery.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 

</head> 
<body> 
<div id="container"> 
<header> 
<h1>JQUERY CONTENT SLIDER</h1> 
</header> 
<img src = "img/left.png" id="prev" alt="prev" > 
<div id="slider"> 
<div class = "slide" > 
<div class = "slide-copy"> 
<h2>slider 1</h2> 
<p background="black">this is slide one</p> 
</div> 
<img src="img/slider.png"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 2</h2> 
<p>this is slide two</p> 
</div> 
<img src="img/slider1.jpg"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 3</h2> 
<p>this is slide three</p> 
</div> 
<img src="img/slider2.jpg"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 4</h2> 
<p background="black">this is slide four</p> 
</div> 
<img src="img/slider3.jpg"> 

</div> 
<div class="slide" > 
<div class= "slide copy"> 
<h2>slider 5</h2> 
<p tex ="black">this is slide five</p> 
</div> 
<img src="img/2722526.png"> 

</div> 
</div> 
<img src = "img/slide-image.png" id="next" alt="next"> 



</div> 
</body> 
</head> 
</html>

JavaScript文件

$(document).ready(function(){ 
var speed = 500; //fade spped 
var autoswitch = true;//auto slider options 
var autoswitch_speed = 4000; //auto slider speed 

//add initial active class 
$('.slide').first().addclass('active'); 
//hide all slides 
$('.slide').hide(); 
//shpw first slide 
$('active').show(); 

$('#next').on('click',nextslide); 
$('#prev').on('click',prevslide); 
//autoslider handler 
if(autoswitch == true);{ 
    setinterval(nextslide.autoswitch_speed); 
} 
// switch to next slide 
function nextslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 

    }else{ 
     $('.oldactive').next().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
}); 
// 
function prevslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 

    }else{ 
     $('oldactive').prev().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 


});

來源

2016-08-14 Aditya Mehta

什麼是'$（ '激活'）顯示（）「應該這樣做？你想選擇「active」類的元素嗎？然後你在選擇器中缺少一個點... – Steve

你也可以使用這個版本不加引號：'$（active）' – Steve

是的，我在第8行做了這個 –

嘗試用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

來源

2016-08-14 21:40:19

我會嘗試這 –

不還是一樣的，我也試着交換兩個腳本標記 –

更換

<script type="text/javascript" src = "jquery.js"></script>

我建議您使用Chrome開發人員工具：
1.按F12
2.一旦開發人員工具在Chrome中打開，請按ESC鍵以打開控制檯

一旦您在那裏，您將看到錯誤，它是代碼第50行中的額外標記，控制檯日誌中的錯誤將顯示如下：

Uncaught SyntaxError: Unexpected token }   script.js:50

在JS的功能，你需要通過主動變

function nextslide(active){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 
    }else{ 
    $('.oldactive').next().addclass('active'); 
    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
function prevslide(active){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 
    }else{ 
     $('oldactive').prev().addclass('active'); 
    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
});

來源

2016-08-14 21:44:20

我檢查你的代碼。最後兩個括號似乎是額外的。
試試這個代碼

$('#next').on('click',nextslide); 
$('#prev').on('click',prevslide); 
//autoslider handler 
if(autoswitch == true);{ 
    setinterval(nextslide.autoswitch_speed); 
} 
// switch to next slide 
function nextslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 

    }else{ 
     $('.oldactive').next().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
}); 
// 
function prevslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 

    }else{ 
     $('oldactive').prev().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
}

來源

2016-08-14 21:49:36

我已經糾正了這個問題，但沒有工作...仍然 –

試試這個：

HTML：

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <title> 
     content slider 
    </title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <h1>JQUERY CONTENT SLIDER</h1> 
     </header> 
     <img src="img/left.png" id="prev" alt="prev"> 
     <div id="slider"> 
      <div class="slide"> 
       <div class="slide-copy"> 
        <h2>slider 1</h2> 
        <p background="black">this is slide one</p> 
       </div> 
       <img src="img/slider.png"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 2</h2> 
        <p background="black">this is slide one</p> 
       </div> 
       <img src="img/slider1.jpg"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 3</h2> 
        <p background="black">this is slide three</p> 
       </div> 
       <img src="img/slider2.jpg"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 4</h2> 
        <p background="black">this is slide four</p> 
       </div> 
       <img src="img/slider3.jpg"> 

      </div> 
      <div class="slide"> 
       <div class="slide copy"> 
        <h2>slider 5</h2> 
        <p background="black">this is slide five</p> 
       </div> 
       <img src="img/2722526.png"> 

      </div> 
     </div> 
     <img src="img/slide-image.png" id="next" alt="next"> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="js/script.js"></script> 
</body> 


</html>

JS：

$(document).ready(function() { 
    var speed = 500; //fade spped 
    var autoswitch = false; //auto slider options 
    var autoswitch_speed = 4000; //auto slider speed 

    //add initial active class 
    $('.slide').first().addClass('active'); 
    //hide all slides 
    $('.slide').hide(); 
    //shpw first slide 
    $('.active').show(); 

    $('#next').off('click').on('click', nextslide); 
    $('#prev').off('click').on('click', prevslide); 
    //autoslider handler 
    if (autoswitch == true); { 
    setInterval(nextslide, autoswitch_speed); 
    } 
    // switch to next slide 
    function nextslide() { 
    $(".active").removeClass('active').addClass('oldactive'); 
    if ($('.oldactive').is('last-child')) { 
     $('.slide').first().addClass('active'); 

    } else { 
     $('.oldactive').next().addClass('active'); 

    } 
    $('.oldactive').removeClass('oldactive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
    } 

    // 
    function prevslide() { 
    $(".active").removeClass('active').addClass('oldactive'); 
    if ($('.oldactive').is('first-child')) { 
     $('.slide').last().addClass('active'); 

    } else { 
     $('.oldactive').prev().addClass('active'); 

    } 
    $('.oldactive').removeClass('oldactive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
    } 

});

來源

2016-08-14 21:52:24 nseepana

它解決了錯誤連接仍然沒有完成 –

_js/script.js_ code有這麼多的語法錯誤，你需要非常carefu l與** camelCase **。 – nseepana

JavaScript沒有鏈接HTML文件

回答

相關問題