Javascript 为什么'；这不是鼠标翻转/鼠标翻转工作吗？

我有3个图像（pic1，pic2，pic3），点击div ID就会变成（pic4，pic5，pic6）。所有这些都很好，但我需要输入mouseover命令，当鼠标悬停在pic2上时，它会变为pic7，在mouseout上，它会回到pic2。我不确定为什么我的这部分代码不起作用，这是语法错误吗？我尝试使用的两个函数是“rolloverImage”和“init”

HTML

Javascript

var g = {};

//Change background colors every 20 seconds
function changebackground() { 
    var backColors = ["#6AAFF7", "#3AFC98", "#FC9B3A", "#FF3030", "#DEDEDE"];
    var indexChange = 0;

    setInterval(function() { 
        var selectedcolor = backColors[indexChange];
        document.body.style.background = selectedcolor;
        indexChange = (indexChange + 1) % backColors.length;
    }, 20000);
}


function rolloverImage(){
    if (g.imgCtr == 0){
        g.pic2.src = g.img[++g.imgCtr];
    }
    else {
        g.pic2.src = g.img[--g.imgCtr];
    }
}

function init(){
    g.img = ["pic2.jpg", "pic7.jpg"];
    g.imgCtr = 0;

    g.pic2 = document.getElementById('pic2');


    g.pic2.onmouseover = rolloverImage; 
    g.pic2.onmouseout = rolloverImage;
}

window.onload = function() {

var picSets = [
  ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  ["pic4.jpg", "pic5.jpg", "pic6.jpg"],
];


var currentSetIdx = 0;

var contentDiv = document.getElementById("content1");
var images = contentDiv.querySelectorAll("img");

refreshPics();


contentDiv.addEventListener("click", function() {
  currentSetIdx = (currentSetIdx + 1) % picSets.length;
  refreshPics();
});

function refreshPics() {
  var currentSet = picSets[currentSetIdx];
  var i;

  for(i = 0; i < currentSet.length; i++) {
    images[i].src = currentSet[i];
  }
}
        changebackground();
        init();
}

var g={}；
//每20秒更改一次背景色
函数changebackground（）{
var背景色=[“#6AAFF7”、“#3AFC98”、“#FC9B3A”、“#FF3030”、“#DEDEDE”]；
var indexChange=0；
setInterval（函数（）{
var selectedcolor=背景色[indexChange]；
document.body.style.background=selectedcolor；
indexChange=（indexChange+1）%backColors.length；
}, 20000);
}
函数rolloverImage（）{
如果（g.imgCtr==0）{
g、 pic2.src=g.img[++g.imgCtr]；
}
否则{
g、 pic2.src=g.img[--g.imgCtr]；
}
}
函数init（）{
g、 img=[“pic2.jpg”，“pic7.jpg”]；
g、 imgCtr=0；
g、 pic2=document.getElementById（'pic2'）；
g、 pic2.onmouseover=滚动验证图像；
g、 pic2.onmouseout=滚动验证图像；
}
window.onload=函数（）{
变量picSets=[
[“pic1.jpg”、“pic2.jpg”、“pic3.jpg”]，
[“pic4.jpg”、“pic5.jpg”、“pic6.jpg”]，
];
var currentSetIdx=0；
var contentDiv=document.getElementById（“content1”）；
var images=contentDiv.querySelectorAll（“img”）；
刷新pics（）；
contentDiv.addEventListener（“单击”，函数（）{
currentSetIdx=（currentSetIdx+1）%picSets.length；
刷新pics（）；
});
函数refreshPics（）{
var currentSet=picSets[currentSetIdx]；
var i；
对于（i=0；i

它似乎工作正常。试着为实际问题提供一把小提琴。这是因为我有更多的功能，而不仅仅是控制所有图像的div。下面是该容器中的示例，每当我悬停时，都会触发新映像src的get请求，但由于映像不可用，因此该请求失败。。

var g = {};

//Change background colors every 20 seconds
function changebackground() { 
    var backColors = ["#6AAFF7", "#3AFC98", "#FC9B3A", "#FF3030", "#DEDEDE"];
    var indexChange = 0;

    setInterval(function() { 
        var selectedcolor = backColors[indexChange];
        document.body.style.background = selectedcolor;
        indexChange = (indexChange + 1) % backColors.length;
    }, 20000);
}


function rolloverImage(){
    if (g.imgCtr == 0){
        g.pic2.src = g.img[++g.imgCtr];
    }
    else {
        g.pic2.src = g.img[--g.imgCtr];
    }
}

function init(){
    g.img = ["pic2.jpg", "pic7.jpg"];
    g.imgCtr = 0;

    g.pic2 = document.getElementById('pic2');


    g.pic2.onmouseover = rolloverImage; 
    g.pic2.onmouseout = rolloverImage;
}

window.onload = function() {

var picSets = [
  ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  ["pic4.jpg", "pic5.jpg", "pic6.jpg"],
];


var currentSetIdx = 0;

var contentDiv = document.getElementById("content1");
var images = contentDiv.querySelectorAll("img");

refreshPics();


contentDiv.addEventListener("click", function() {
  currentSetIdx = (currentSetIdx + 1) % picSets.length;
  refreshPics();
});

function refreshPics() {
  var currentSet = picSets[currentSetIdx];
  var i;

  for(i = 0; i < currentSet.length; i++) {
    images[i].src = currentSet[i];
  }
}
        changebackground();
        init();
}