我正在创建一个包含javascript bubble链接的页面，我想在其上播放幻灯片。它似乎运行良好，但在用幻灯片制作其他几页后，它们都破了。我不确定为什么，因为他们都有不同的名字和不同的javascripts，他们都在正确的地方。我要将我拥有的所有代码粘贴到一个页面上。我有一个名为珠宝的文件夹，其中包含图片和javascript，但是html页面位于主文件夹中，但我将其标记为如此。有什么东西我不知道或需要带走吗？我想要注意的是，javascript得到的是一个非常完整的javascript书（我只是更改了文件位置和标题），所以这应该是相当不错的。它主要是html。我希望我的导航能够与我的幻灯片一起使用。它会显示第一张图片，但按钮不会转到下一张图片。
如果您有更容易编码的建议，请继续。否则，我想解决这个问题。我的最后一个项目将在几天后到期并且如何解决这个问题！我没有把它全部上传到实际的链接，所以你必须使用我给你的片段 - 这就是我整个页面和我所有的javascript。
提前致谢。
window.onload = initAll;
var currImg = 0;
var captionText = [
"Mostly bracelets right now",
];
function initAll() {
document.getElementById("imgText").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = function() {
newSlide(-1);
}
document.getElementById("nextLink").onclick = function() {
newSlide(1);
}
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow1").src = "jewelry/bracelet" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Think Jewelry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="jewelry/jewelry.js"></script>
<style>
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 450px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
height:45px;
width:100%;
background-color:#EAC5E4;
position:relative;
bottom:-0;
font-style: italic;
}
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="content">
<a href="index.html"><div class="title"> </div></a>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="aboutshop.html">About the Shop</a></li>
<li><a href="aboutartist.html">About the Artist</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>How-To's</h2>
<ul>
<li><a href="howtojewelry.html">Jewelry</a></li>
<li><a href="howtoclay.html">Clay</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Portfolio</h2>
<ul>
<li><a href="jewelry.html">Jewelry</a></li>
<li><a href="clay.html">Clay</a></li>
<li><a href="digital.html">Digital</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Contact</h2>
<ul>
<li><a href="contact.html">Questions</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div id="horizon">
<div id="stuff">
<h2> Jewelry Gallery </h2><br>
<img src="jewelry/bracelet0.jpg" alt="My Jewelry" id="slideshow1"></img>
<div id="imgText"> </div>
<div id="chgImg">
<input type="button" id="prevLink" value="« Previous">
<input type="button" id="nextLink" value="Next »">
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<a href="http://kiya-rose.deviantart.com/">
<img height="32" width="32" alt=" Deviantart" src="deviantart.png">
</a>
<a href="https://www.facebook.com/thinkjewelryy">
<img height="32" width="32" alt=" Think Jewelry Page" src="facebook.png">
</a>
Copyright© Brittany Rose
</footer>
</body>
</html>
答案 0 :(得分：0)
为什么＆＃34; CaptionText＆＃34;数组中只有一个项目？在这种情况下，幻灯片索引始终为＆＃34; 0＆＃34;。
var captionText = [ ＆＃34;现在主要是手镯＆＃34;， ];