Question

我试图改进一个正常工作的网页，使其成为一种幻灯片放映，在三个度假村之间交替进行。图片和一切都应该有效。如果我把脚本放在标题或正文中似乎并不重要，它似乎无论以哪种方式运作。

更奇怪的是，如果我在警报后放置一个结束脚本标记，然后创建一个新的脚本标记，则会调用该警报。虽然它现在是，但即使是警报也没有被调用，虽然我不知道为什么，因为我还注释了几乎所有的脚本代码，试图找到问题区域，它是什么还是行不通。我感到很困惑。



<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">





</head>
<body>



<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div><a href="home.html"> Home </a> </div>
<div><a href="mountains.html"> The Mountains </a></div>
<div><a href="resorts.html"> The Resorts </a></div>
<div><a href="snowreports.html"> Snow Reports </a></div>
<div><a href="eventsandactivities.html"> Events &amp Activities </a></div>
<div><a href="plantrip.html"> Plan A Trip </a></div>
</nav>
<div id="middle">
<nav id="vert">
<a href="home.html"> Home </a> <br/>
<a href="mountains.html"> The Mountains </a><br/>
<a href="resorts.html"> The Resorts </a><br/>
<a href="snowreports.html"> Snow Reports </a><br/>
<a href="eventsandactivities.html"> Events &amp Activities </a><br/>
<a href="plantrip.html"> Plan A Trip </a>
</nav>

<div id="text-container">
Bla bla bla
  </div>
</div>
</div>

<div id="footercontainer">
<footer>
&copy;  2016   

</footer>
</div>
</div>

<script>


window.alert("Houston, we have a problem.");

var count = 1;



<!--

var changing = setInterval(moveImage, 6000);




function moveImage()
{




increaseCount();

}

function increaseCount()
{
count++;


if (count > 3)
count = 1;

changeImage();

}

function changeImage()
{


var tc = document.getElementById("text-container");

if (count == 1)
{
tc.innerHTML = "
<h1>   The Resorts </h1>" + 
"<h2> The West Resort </h2>" + 
"<figure><img src='./image1.jpg' alt='West Resort' width=300; height=225;></img><figcaption><B> The West Resort</B></figcaption></figure>"+
"<p> The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. 

West is home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.  </p>";
}

else if (count == 2)
{
tc.innerHTML = "
<h1>   The Resorts </h1>" + 
"<h2> The East Resort </h2>" + 
"<figure><img src='./image4.jpg' alt='East Resort' width=300; height=225;></img><figcaption><B> The East Resort</B></figcaption></figure>"+
"<p> The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the 

longest, steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the 

East Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.   </p>";

}

else
{

tc.innerHTML = "
<h1>   The Resorts </h1>" + 
"<h2> The North Resort </h2>" + 
"<figure><img src='./image9.jpg' alt='North Resort' width=300; height=225;></img><figcaption><B> The North Resort</B></figcaption></figure>"+
"<p> The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but 

small enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s 

oldest base lodges with ties that go back to the Big Pines ski clubs of the 1940s.    </p>";

}

}
-->

</script>

</body>
</html>

<html> <head> <title> The Resorts </title> <link rel="stylesheet" type="text/css" href="./main.css"> </head> <body> <div id="content"> <div id="logo"> <img src="./logo.png"></img> </div> <div id="container"> <nav id="hor"> <div><a href="home.html"> Home </a> </div> <div><a href="mountains.html"> The Mountains </a></div> <div><a href="resorts.html"> The Resorts </a></div> <div><a href="snowreports.html"> Snow Reports </a></div> <div><a href="eventsandactivities.html"> Events &amp Activities </a></div> <div><a href="plantrip.html"> Plan A Trip </a></div> </nav> <div id="middle"> <nav id="vert"> <a href="home.html"> Home </a> <br/> <a href="mountains.html"> The Mountains </a><br/> <a href="resorts.html"> The Resorts </a><br/> <a href="snowreports.html"> Snow Reports </a><br/> <a href="eventsandactivities.html"> Events &amp Activities </a><br/> <a href="plantrip.html"> Plan A Trip </a> </nav> <div id="text-container"> Bla bla bla </div> </div> </div> <div id="footercontainer"> <footer> © 2016 </footer> </div> </div> <script> window.alert("Houston, we have a problem."); var count = 1;  </script> </body> </html>

但是，这个代码，我以上面的代码为基础，正在运作，我不知道我做了多少不同的事情，因为它突然停止工作。

<html>
<head>
<title> Carousel </title>



</head>
<body>


<div style="border: 1px solid black;  width = 190; height = 300;>
<div style ="border: 1px solid black; " id="imageStuff">

<figure><img src="./mongoose image.jpg" width=190; height =100;></img>
<figcaption><B> Mongoose </B></figcaption>
</figure>
</div>


<div style="border: 1px solid black;  background-color: blue;" width= 190; height=100;>





<button onClick="decreaseCount()"><</button>
<button onClick="changeCount(1)">1</button>
<button onClick="changeCount(2)">2</button>
<button onClick="changeCount(3)">3</button>
<button onClick="changeCount(4)">4</button>
<button onClick="changeCount(5)">5</button>
<button onClick="increaseCount()">></button>
</div>

</div>
<script>

var count = 1;
var images= [ "./mongoose image.jpg", "./fossa.jpg", "./ferret.png", "./civet.jpg", "./hyrax.jpg"];
var labels =["Mongoose", "Fossa", "Ferret", "Civet", "Hyrax"];

var changing = setInterval(moveImage, 3000);

function increaseCount()
{
changeCount(count+1)
}

function decreaseCount()
{
changeCount(count-1);
}


function moveImage()
{




increaseCount();

}

function changeCount(count2)
{
count = count2;

if (count < 1)
count = 5;

if (count > 5)
count = 1;

changeImage();

}

function changeImage()
{





document.getElementById("imageStuff").innerHTML = "<figure><img src='" + images[count-1] + "'  width=190 height = 100;></img>" +
"<figcaption><B>" + labels[count-1] + "</B></figcaption></figure>";





}

</script>

</body>
</html>

Javascript代码神秘地无法正常工作

0 个答案: