为什么我的代码坏了
Why is my code broken?
我正在制作一个带有javascript气泡链接的页面，我想要一个幻灯片。它似乎工作正常，但是在制作了其他几个带有幻灯片的页面后，它们都坏了。我不确定为什么，因为它们都有不同的名称和不同的javascript，而且它们都在正确的位置。我将粘贴我为一页提供的所有代码。我有一个名为珠宝的文件夹，其中包含图片和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>为什么"CaptionText"数组中只有一个项目？在这种情况下，幻灯片索引将始终为"0"。
变量标题文本 = [ "现在主要是手镯"， ];
相关文章：
- "工具提示"jQuery插件坏了
- 我的按钮坏了
- 节点JS:时间机器坏了——timekeeper.travel不做时间旅行
- UglifyJS更改了代码bahaviour
- HTML/JavaScript:为什么不'我的纽扣坏了
- 我的素数函数坏了，但我没有;我不知道为什么
- Uglifier是不是弄坏了我的睡衣
- JavaScript值的引号破坏了代码
- 我升级了Knockout.js，现在我的模板坏了
- 为什么范围$手表坏了
- 所有的javascript都 ajax.aspnetcdn.com/ajax/ 坏了?打破所有外部引用?自周五以来
- 角度控制器功能坏了
- 谷歌可视化图表API示例坏了，如何修复它们
- 将Facebook应用程序移动到新服务器，现在它坏了
- 为什么我的代码坏了
- 野生动物园浏览器中的后退按钮坏了
- 砌体坏了(可能是经典）
- 选择器 $(body） 有效但破坏了代码(引用错误），而 $(“body”） 没有显示错误但不起作用
- 旋转相机后，Three.js的skybox似乎坏了
- 我更改了代码，但它没有;t显示倒计时的秒数
