<!DOCTYPE HTML>
<html>
<head>
<title><?php the_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow img:gt(0)').hide();
});
setInterval(function(){
$('#slideshow .image:first')
.fadeOut()
.next('.image').fadeIn()
.end()
.appendTo('#slideshow');
}, 2000);
$(document).ready(function(){
$('#slideshow .image').click(function(){
$(this)
.fadeOut()
.next('.image').fadeIn()
.end('.image:last').appendTo('.image:first');
clearInterval();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<?php get_header(); ?>
</div>
<div id="body">
<?php if (is_page('Home')){
get_sidebar('2');
}
if (is_home()){
get_sidebar('2');
}
?>
<div id="blankline">
</div>
<div id="why">
<?php if (is_page('Home')){
get_sidebar('3');
}
if (is_home()){
get_sidebar('3');
}
?>
</div>
<div id="information">
<?php if (is_page('Home')){
get_sidebar('4');
}
if (is_home()){
get_sidebar('4');
}
?>
</div>
</div>
<div id="footer">
<?php get_footer(); ?>
</div>
</div>
#body {
width: 100%;
}
#around-slideshow {
margin: 0;
width: 100%;
background: #E0E0E0;
float: left;
}
#previous {
margin-top: 40px;
height: 360px;
width: 7.4%;
float: left;
background: url(images/leftArrow.png) no-repeat;
background-position: center center;
position: relative;
z-index: 100;
}
#slideshow {
margin-top: 40px;
margin-bottom: 40px;
margin-left: 0;
width: 85%;
height: 360px;
overflow: hidden;
float: left;
}
#next {
margin-top: 40px;
margin-left: 92.4%;
height: 360px;
width: 7.4%;
background: url(images/rightArrow.png) no-repeat;
background-position: center center;
}
这是一个HTML文档（包含jQuery）和一个CSS文档。
我用jQuery制作了幻灯片，并在2秒后将图像更改为下一张图像。 此外，我已经做过，如果你点击一个图像，它将改变为下一个图像。
但我有一个问题，我没有制作2个'控制器'，一个用于上一个图像，一个用于下一个图像，但我不知道我是如何将它放在Jquery中的。
有人可以帮助我吗？