Question

我是Javascript的新手，试图制作图片库。但是我的代码只显示右边的第一张图片。虽然我使用了onmouseover，但它不会发生变化。当我试图切换图片时，它没有任何反应。任何人都可以帮我吗？谢谢！！

<html>
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
body{
    margin:0;
    padding:0;
}

#menu li{
    list-style-type:none;

}

#menu li img{
    height:80px;
    width:100px;
}

#left {

    float:left;
    margin:30px;
}
#right{
    height:400px;
    widows:600px;
    float:left;
    margin:30px;
}
</style>
<script>
window.onload = test;


 function test (){
    var right = document.getElementById("right");
    var list = document.getElementsByTagName("img");
    for(var i= 0;i<list.length;i++){
        var img = list[i];
        list[i].onmouseover = showPic(list[i]);
        list[i].onmouseout = hidPic(list[i]);
    }
}

function showPic(obj){
    var right = document.getElementById("right");
    right.appendChild(obj);
}

function hidPic(obj){
    var right = document.getElementById("right");
    right.removeChild(obj);
}

</script>
</head>

<body>
    <div id="left">
        <ul id="menu">
            <li><img src="1.jpg"/></li>
            <li><img src="2.jpg"/></li>
            <li><img src="3.jpg"/></li>
            <li><img src="4.jpg"/></li>
            <li><img src="5.jpg"/></li>

        </ul>
    </div>
    <div id="right">

    </div>
</body>
</html>

Answer 1

您好JAvascript简单鼠标悬停更改图库中的img尝试此

<强> JS

    <?php
    echo "hello";   
?>

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form action="/one1.php" method="POST" enctype="multipart/form-data">
            <input type="file" name="image" />
            <input type="submit"/>
        </form>
    </body>
</html>

<强> HTML

function onHover(element)
{
document.getElementById("right").src= element.getAttribute('src');
}

和Jquery

Jquery的

<div id="left">
        <ul id="menu">
            <li><img src="http://www.w3schools.com/bootstrap/img_chania.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower.jpg" onmouseover="onHover(this);" /></li>
            <li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" onmouseover="onHover(this);" /></li>

        </ul>
    </div>
    <img id ="right" src="http://www.w3schools.com/bootstrap/img_chania.jpg"/>

<强> HTML

$(document).ready(function(){
  $("img").mouseout(function() {
  })
  .mouseover(function() {
console.log($(this))
  $("#right").attr('src' , $(this).attr("src"));
  });

});

for refrence https://plnkr.co/edit/8zthUijUQqQqyjoR7PMw

使用Javascript的简单图像库，但它只显示第一个图像

1 个答案: