Question

晚上好，我正在尝试创建允许用户将鼠标悬停在拇指上的功能，放大的图像将显示在占位符中。我还创建了使用数组旋转横幅广告的功能。我的问题是我无法执行任何脚本，我不明白为什么因为我是JS的新手。有什么帮助吗？

<script type = "text/javascript">

window.onload = rotate;


var banners = ["banner1.gif","banner2.gif","banner3.gif","banner4.gif"];
for (var i =0; i<banners.length; i++) {
    banners[i] = new Image();
}

    function rotate() {
     var i;
     if (i == banners.length) {
        i = 0;
     }
     document.getElementById("banner").src = banners[i];

     setTimeout(rotate, 3 * 1000);
    }
}



var fullSize = ["FrenchQuarter","GoldenGateBridge", "NazarethBay", "TheAlamo"];
//declare each as an image object
//declare each one of the array elemant as an image object
for (var i =0; i<fullSize.length; i++) {
    fullSize[i] = new Image(279,373);
}

var width = 0;
var speed = 3;
var interval = null;

window.addEventListener("load", start, false);

function start() {

 document.getElementById("smallfq").onmouseover=function() {displayFull(0)};
 document.getElementById("smallggb").onmouseover=function() {displayFull(1)};
 document.getElementById("smallNaz").onmouseover=function() {displayFull(2)};
 document.getElementById("smallAlamo").onmouseover=function() {displayFull(3)};

}

function displayFull(n) {
    document.getElementByid("placeholder").setAttribute("style", "width:0px; height:0px;");
    width=0;
    document.getElementByid("placeholder").src=fullSize[n].src; 
}

相应的HTML如下：

<!DOCTYPE html>

<html>
 <head>
 <meta charset = "utf-8">
  <title>Assignment 3</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
  <script type ="text/javascript" src = "Assignment3.js"></script>
 </head>

 <body>

 <div id = "bannerDiv">
   <img src = "banner3.gif" id = "banner" alt = "banner" >
  </div>
  <br>

  <div id = "placeholderdiv">
  <br>
   <img id = "placeholder" src = "placeholder.jpg" alt = "placeholder">
  <p>Move your Mouse over one of the icons to see and enlarged image</p>
  <br>
  </div>
  <br>

  <div id = "thumbs">
   <img src = "FrenchQuarter_small.jpg" id = "smallfq" alt = "smallFrenchQuarter">
   <img src = "GoldenGateBridge_small.jpg" id = "smallggb" alt = "smallggb"  >
   <img src = "NazarethBay_small.jpg" id = "smallNaz" alt = "smallNaz" >
   <img src = "TheAlamo_small.jpg" id = "smallAlamo" alt = "SmallAlamo" onmouseover ="function() {displayFull(3)}" >
  </div>
  <br>

 </body>

 </html>

Answer 1

我认为有一些问题。你有额外的＆＃34;}＆＃34;刚刚旋转功能之后。用于将鼠标悬停事件附加到图像上，＆＃34; onmouseover＆＃34;是不正确的。相反，请使用tracert -d example.com

这与你所拥有的有点不同，但试试这个：

对于＆＃34;拇指＆＃34;中的所有图像div，添加一个具有相同值的class属性（例如，对Thumb div中的每个img执行{ "key":"value" }之类的操作）。所以它看起来像这样：

addEventListener('mouseover', function, false);

然后，您可以将事件处理程序附加到每个图像，如下所示：

class="thumbImage"

然后你只需稍微调整你的<div id="thumbs"> <img src="FrenchQuarter_small.jpg" class="thumbImage" id="smallfq" alt="smallFrenchQuarter"> <img src="GoldenGateBridge_small.jpg" class="thumbImage" id="smallggb" alt="smallggb"> <img src="NazarethBay_small.jpg" class="thumbImage" id="smallNaz" alt="smallNaz"> <img src="TheAlamo_small.jpg" class="thumbImage" id="smallAlamo" alt="SmallAlamo"> </div>功能。在该功能中，您可以通过执行function start() { // This gets a collection of all the elements with the class "thumbImage" var classname = document.getElementsByClassName("thumbImage"); // Now loop over ever element in the collection and attach the event to it for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('mouseover', displayFull, false); } }来获取moused-over图像。所以：

displayFull

这会提醒属于被篡改的图像的ID。

这是一个显示所有这一切的小提琴：https://jsfiddle.net/b1Lr3a4y/1/

不执行脚本

1 个答案: