JavaScript mouseenter 图片

如何解决JavaScript mouseenter 图片

通过使用Javascript，使用两个事件处理程序将现有大图翻转为大图对应于鼠标悬停的缩略图（小）图像。当。。。的时候缩略图被鼠标移开，将大图像更改回原始大图像。 没有 jQuery。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Image gallery code for Assessment 1</title>
    <Meta charset="utf-8">
    
    <link href="css/assessment1.css" rel="stylesheet">
</head>

<body onload="Imagegallery.init()">

    <div id="thumbnails">
        <img src="images/thumbs/thumb1.jpg" id="0">
        <img src="images/thumbs/thumb2.jpg" id="1">
        <img src="images/thumbs/thumb3.jpg" id="2">
        <img src="images/thumbs/thumb4.jpg" id="3">
    </div>

    <div id="container">
        <img src="images/bigPics/initialPic.jpg" id="bigPic">
    </div>

    <script src="js/imagegallery_rsmidt.js"></script>

</body>
</html>

///////// CSS： /////////

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;
}

///////// JavaScript： /////////

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;

JavaScript mouseenter 图片

如何解决JavaScript mouseenter 图片

相关推荐