关于jQuery调用没有效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>

<title>Beautiful advanced jQuery background image slideshow</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

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

</head>

<body>

<div id="header">

	<!-- jQuery handles to place the header background images -->

	<div id="headerimgs">

		<div id="headerimg1" class="headerimg"></div>

		<div id="headerimg2" class="headerimg"></div>

	</div>

	<!-- Top navigation on top of the images -->

	<div id="nav-outer">

		<div id="navigation">

			<div id="search">

				<form>

					<input type="text" id="searchtxt" />

					<input type="submit" value="search" id="searchbtn" />

				</form>

			</div>

			<div id="menu">

				<ul>

					<li><a href="http://www.marcofolio.net/">Marcofolio</a></li>

					<li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>

					<li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>

					<li><a href="http://jquery.com/">jQuery</a></li>

					<li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>

					<li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>

				</ul>

			</div>

		</div>

	</div>

	<!-- Slideshow controls -->

	<div id="headernav-outer">

		<div id="headernav">

			<div id="back" class="btn"></div>

			<div id="control" class="btn"></div>

			<div id="next" class="btn"></div>

		</div>

	</div>



</div>

</body>

</html>

/* COMMON CLASSES */

.break { clear:both; }



/* HEADER */

#header { height:369px; }

.headerimg { background-position: center top; background-repeat: no-repeat; width:980px; height:369px; position:absolute; }



/* NAVIGATION */

#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("images/headerbg.png"); }

#navigation { height:100px; width:980px; margin:0 auto; background-image:url("images/logo.png"); background-position:top left; background-repeat:no-repeat; }



/* SEARCH */

#search { background-color:#051733; float:right; width:220px; padding:10px; }

#searchtxt { padding:3px; width:150px; }

#searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }



/* MENU */

#menu { position:relative; top:85px; }

#menu ul { list-style:none; }

#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }

#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }

#menu ul li a:hover { text-decoration:underline; }



/* HEADER TEXT */

#headertxt { width:980px; margin:0 auto; clear:both; position:relative; top:74px; }

#firstline { background-image:url("images/textbg.png"); color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; }

#secondline { background-image:url("images/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }

#secondline:hover { text-decoration:underline; color:#7F000C; }



.pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }

.pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; }

.pictured a:hover { text-decoration:underline; }



/* CONTROLS */

.btn { height:32px; width:32px; float:left; cursor:pointer; }

#back { background-image:url("images/btn_back.png"); }

#next { background-image:url("images/btn_next.png"); }

#control { background-image:url("images/btn_pause.png"); }



/* HEADER HAVIGATION */

#headernav-outer { position:relative; top:300px; margin:0 auto; width:980px; }

#headernav { padding-left:864px; }



/* CONTENT */

#content { color:#575757; background-color:#eee; }

#content p { padding:10px 20px; font-size:16px; width:980px; margin:0 auto; }

#content p a { text-decoration:none; color:#CD2B3A; }

#content p a:hover { text-decoration:underline; color:#7F000C; }

/*

* Author:      Marco Kuiper (http://www.marcofolio.net/)

*/



// Speed of the automatic slideshow

var slideshowSpeed = 6000;



// Variable to store the images we need to set as background

// which also includes some text and url's.

var photos = [ {

		"title" : "Stairs",

		"image" : "vacation.jpg",

		"url" : "http://www.sxc.hu/photo/1271909",

		"firstline" : "Going on",

		"secondline" : "vacation?"

	}, {

		"title" : "Office Appartments",

		"image" : "work.jpg",

		"url" : "http://www.sxc.hu/photo/1265695",

		"firstline" : "Or still busy at",

		"secondline" : "work?"

	}, {

		"title" : "Mountainbiking",

		"image" : "biking.jpg",

		"url" : "http://www.sxc.hu/photo/1221065",

		"firstline" : "Get out and be",

		"secondline" : "active"

	}, {

		"title" : "Mountains Landscape",

		"image" : "nature.jpg",

		"url" : "http://www.sxc.hu/photo/1271915",

		"firstline" : "Take a fresh breath of",

		"secondline" : "nature"

	}, {

		"title" : "Italian pizza",

		"image" : "food.jpg",

		"url" : "http://www.sxc.hu/photo/1042413",

		"firstline" : "Enjoy some delicious",

		"secondline" : "food"

	}

];







$(document).ready(function() {

		

	// Backwards navigation

	$("#back").click(function() {

		stopAnimation();

		navigate("back");

	});

	

	// Forward navigation

	$("#next").click(function() {

		stopAnimation();

		navigate("next");

	});

	

	var interval;

	$("#control").toggle(function(){

		stopAnimation();

	}, function() {

		// Change the background image to "pause"

		$(this).css({ "background-image" : "url(images/btn_pause.png)" });

		

		// Show the next image

		navigate("next");

		

		// Start playing the animation

		interval = setInterval(function() {

			navigate("next");

		}, slideshowSpeed);

	});

	

	

	var activeContainer = 1;	

	var currentImg = 0;

	var animating = false;

	var navigate = function(direction) {

		// Check if no animation is running. If it is, prevent the action

		if(animating) {

			return;

		}

		

		// Check which current image we need to show

		if(direction == "next") {

			currentImg++;

			if(currentImg == photos.length + 1) {

				currentImg = 1;

			}

		} else {

			currentImg--;

			if(currentImg == 0) {

				currentImg = photos.length;

			}

		}

		

		// Check which container we need to use

		var currentContainer = activeContainer;

		if(activeContainer == 1) {

			activeContainer = 2;

		} else {

			activeContainer = 1;

		}

		

		showImage(photos[currentImg - 1], currentContainer, activeContainer);

		

	};

	

	var currentZindex = -1;

	var showImage = function(photoObject, currentContainer, activeContainer) {

		animating = true;

		

		// Make sure the new container is always on the background

		currentZindex--;

		

		// Set the background image of the new active container

		$("#headerimg" + activeContainer).css({

			"background-image" : "url(images/" + photoObject.image + ")",

			"display" : "block",

			"z-index" : currentZindex

		});

		

		// Hide the header text

		$("#headertxt").css({"display" : "none"});

		

		// Set the new header text

		$("#firstline").html(photoObject.firstline);

		$("#secondline")

			.attr("href", photoObject.url)

			.html(photoObject.secondline);

		$("#pictureduri")

			.attr("href", photoObject.url)

			.html(photoObject.title);

		

		

		// Fade out the current container

		// and display the header text when animation is complete

		$("#headerimg" + currentContainer).fadeOut(function() {

			setTimeout(function() {

				$("#headertxt").css({"display" : "block"});

				animating = false;

			}, 500);

		});

	};

	

	var stopAnimation = function() {

		// Change the background image to "play"

		$("#control").css({ "background-image" : "url(images/btn_play.png)" });

		

		// Clear the interval

		clearInterval(interval);

	};

	

	// We should statically set the first image

	navigate("next");

	

	// Start playing the animation

	interval = setInterval(function() {

		navigate("next");

	}, slideshowSpeed);

	

});