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