JavaScript滑塊在本地不起作用？

好吧，我發現了一個關於使用javascript的slidehsow的一小段代碼。但由於某種原因，它不適用於我的電腦。這是原來的帖子： Looking for a fullwidth slider JavaScript滑塊在本地不起作用？

它在那裏工作，但由於某種原因，它不適合我！

我做錯了什麼？

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
.clear { clear:both; } 
.wrapper { width:980px; margin:0 auto; } 
.slider { margin:20px 0; height:100px; position:relative; } 
.slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; text-align:center; color:#fff; font-size:24pt; } 
.header { background:#eee; font-size:18pt; } 
.content { } 
.footer { background:#eee; text-align:center; } 

.slider-nav { margin: 0 auto; width:100px; clear:both; } 
.slider-nav li { float:left; margin:0 5px; } 
--> 
</style> 
<script type="text/javascript"> 
$('.slider .slide:first').addClass('active').fadeIn(200); 

function rotate(index) { 
    $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
     $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200); 
    }); 
} 

$('.slider-nav li a').click(function() {  
    var index = $(this).parent().index('li'); 
    rotate(index); 
    return false; 
}); 

setInterval(function() { 
    var $next = $('.slider .slide.active').next(); 

    if ($next.length == 0) 
     $next = $('.slider .slide:first'); 

    rotate($next.index()); 
}, 2000); 
</script> 
</head> 

<body> 
<div class="header wrapper"> 
    <h1>Site header</h1> 
</div> 
<div class="slider"> 
    <div class="slide">1</div> 
    <div class="slide">2</div> 
    <div class="slide">3</div> 
    <div class="slide">4</div> 
</div> 
<ul class="slider-nav"> 
    <li><a href="#" >1</a></li> 
    <li><a href="#" >2</a></li> 
    <li><a href="#" >3</a></li> 
    <li><a href="#" >4</a></li> 
</ul> 
<div class="clear"></div> 
<div class="content"> 
    <div class="wrapper"> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
    </div> 
</div> 
<div class="footer"> 
    <div class="wrapper">&copy; www.mysite.com </div> 
</div> 
</body> 
</html>

來源

2013-02-27 user2056633

該頁面並未包含它所依賴的jQuery，請嘗試包括它。 – 2013-02-27 12:40:53

您的款式也被註釋掉了。 – jalynn2 2013-02-27 12:42:36

@AlexK。對不起，如果它聽起來很愚蠢，但我怎麼能包括在該頁面的jQuery？我對JavaScript和jQuery相當陌生。 – user2056633 2013-02-27 12:46:57