JavaScript鼠标指针图像

通过使用Javascript，使用两个事件处理程序将现有的大型图像滚动到大型图像 对应于鼠标悬停的缩略图（小）图像。当 缩略图被鼠标移走后，将大图像更改回原始大图像。没有jQuery

//////// HTML ////////

///////// JavaScript: /////////

body {
    margin: 0 auto;
    text-align: center;
    background-color: #000000;
}

#thumbnails {
    padding-top: 20px;
    padding-bottom: 30px;
}

#thumbnails img {
    background: #fff;
    padding: 4px 4px 18px 4px;
    margin: 0 5px;
}

#bigPic {
    background: #fff;
    padding: 7px 7px 34px 7px;
}

let ImageGallery = {};

ImageGallery.init = function() {

picArray = ["1", "2", "3", "4"];

    // Get reference to large image and store in variable
    // named canvas
    let canvas = document.querySelector("#bigPic");

    // Get reference to div#thumbnails and store in
    // variable named thumbsDiv
    let thumbsDiv = document.querySelector("#thumbnails");

    // Set up a nodelist, named thumbs, containing
    // references to all <img> tags in div#thumbnails
    let thumbs = document.querySelectorAll("#thumbnails");

    // Add mouseenter and mouseleave event handlers to
    // each thumbnail image in thumbs using a for loop.
    //
    // Set them up to call a method of our object called
    // newPic on mouseenter and a method called origPic
    // on mouseleave.
    for (let i = 0; i < thumbs.length; i++ ) {

        thumbs[i].addEventListener('mouseenter', function() {
            let newPic = ;
        })
        
        thumbs[i].addEventListener('mouseleave', function() {
            let origPic = ;
        })
    
    }
},
        
ImageGallery.newPic = function() {
    // Get the value of the moused over object's id
    // attribute and store it in a variable named
    // imgNumber
    let imgNumber = document.querySelector('#bigPic');

    // Build the path to the image we want to rollover to
    // and store the path string in a variable named
    // imgPath
    imgPath = 'images/bigPics' + this.id;
    //let imgPath = ImageGallery.canvas(1, picArray.length);

    // Rollover (change) the large image to the moused
    // over thumbnail’s large image
    ImageGallery.thumbs[i].innerHTML = canvas;

    }

//ImageGallery.origPic function() {
    // Rollover the large image back to its original image
//}

window.onload = ImageGallery.init;

让ImageGallery={}；
ImageGallery.init=函数（）{
picArray=[“1”、“2”、“3”、“4”]；
//获取对大图像的引用并存储在变量中
//命名画布
让canvas=document.querySelector（“#bigPic”）；
//获取div#缩略图的引用并存储在
//名为thumbsDiv的变量
let thumbsDiv=document.querySelector（“缩略图”）；
//设置名为thumbs的节点列表，其中包含
//对div#缩略图中所有标记的引用
设thumbs=document.queryselectoral（#缩略图”）；
//将mouseenter和mouseleave事件处理程序添加到
//每个缩略图图像在拇指中使用for循环。
//
//将它们设置为调用对象的方法
//mouseenter上的newPic和一个名为origPic的方法
//在mouseleave上。
for（设i=0；i

请在代码段中添加您的代码：）

let ImageGallery = {};

ImageGallery.init = function() {

picArray = ["1", "2", "3", "4"];

    // Get reference to large image and store in variable
    // named canvas
    let canvas = document.querySelector("#bigPic");

    // Get reference to div#thumbnails and store in
    // variable named thumbsDiv
    let thumbsDiv = document.querySelector("#thumbnails");

    // Set up a nodelist, named thumbs, containing
    // references to all <img> tags in div#thumbnails
    let thumbs = document.querySelectorAll("#thumbnails");

    // Add mouseenter and mouseleave event handlers to
    // each thumbnail image in thumbs using a for loop.
    //
    // Set them up to call a method of our object called
    // newPic on mouseenter and a method called origPic
    // on mouseleave.
    for (let i = 0; i < thumbs.length; i++ ) {

        thumbs[i].addEventListener('mouseenter', function() {
            let newPic = ;
        })
        
        thumbs[i].addEventListener('mouseleave', function() {
            let origPic = ;
        })
    
    }
},
        
ImageGallery.newPic = function() {
    // Get the value of the moused over object's id
    // attribute and store it in a variable named
    // imgNumber
    let imgNumber = document.querySelector('#bigPic');

    // Build the path to the image we want to rollover to
    // and store the path string in a variable named
    // imgPath
    imgPath = 'images/bigPics' + this.id;
    //let imgPath = ImageGallery.canvas(1, picArray.length);

    // Rollover (change) the large image to the moused
    // over thumbnail’s large image
    ImageGallery.thumbs[i].innerHTML = canvas;

    }

//ImageGallery.origPic function() {
    // Rollover the large image back to its original image
//}

window.onload = ImageGallery.init;