Question

感谢您的查看，我有这个计划，我想创建一个图库，我可以通过鼠标移动一堆8个缩略图来更改主图像，这很容易。

我想要添加的是单独的一小组3个缩略图，当这些缩略图时，它们会更改8个缩略图并让它们调出8个新的主要图像。对不起，我希望这是可以理解的？

所以它有点像分层或嵌套的排列，几乎就像一个小文件夹树，新的3个拇指握着8个拇指的不同库......不，这可能只是让它更加混乱!!! ..

我很想知道所有这一切都是用鼠标悬挂在拇指上所以它很顺利，没有点击或重新加载页面。

我已经好好看看了，但可能只需要告诉我在搜索引擎中弹出哪些术语/短语/命令。

让3个拇指更换8个拇指和主要图像应该很简单我目前正在使用它：

<img src = "images/nicepic5thumb.png"  onmouseover =”document.main.src = 'images/nicepic5.jpg';">

主要大图是：

<img src = "images/nicepic1.jpg" name= "main">

我想它可以扩展到多个图像。不必像这样做，只要做得最好，它就会让一个mousover更改多个鼠标悬停命令，这些命令目前已超出我的范围。

最终我的目标是让所有的过渡都消失。

非常感谢指针朝着正确的方向发展。

Answer 1

我会用相应的命令发送3个（或更多）8个面板（相同）以更改主图像并使3个索引拇指切换8个图像面板的可见性

Answer 2

这实际上是jQuery

中很容易做到的事情

您需要做的就是为图库中的图像添加一个公共类，或者更有效地将ID添加到包含图像的元素中，并使用它来选择图像，例如。

<img src = "images/nicepic1.jpg" name= "main" id="main_img">
<div id="gallery"><img src="nicepic1thumb.png"><img src="nicepic2thumb.png"><img src="nicepic3thumb.png"></div>
<script>
  $(document).ready(function(){
    $("#gallery img").onmouseover(function(){
      $("#main_img").attr('src',$(this).attr('src').replace("thumb.png",".jpg"));
    }
  }
</script>

这是一个没有动画的完整工作库，可以完全按照您的需要进行操作。

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript" ></script>
    <script>
        $(document).ready(function(){
            gallery.init();
        });
        var gallery = {
            main_img: null,
            init:function(){
                gallery.main_img = $("#main_img img");
                $("#images img").click(function(){
                    gallery.change($(this).attr('src'));
                });
            },
            change: function(image){
                gallery.main_img.attr('src', image.replace("thumb.png",".jpg"));
            }
        }
    </script>
</head>
<body>
    <div id="gallery">
    <div id="main_img"><img src="images/image1.jpg"/></div>

    <div id="images">     
        <img src="images/image1thumb.png"/><img src="images/image2thumb.png"/><img src="images/image3thumb.png"/><img src="images/image4thumb.png"/><img src="images/image5thumb.png"/>
    </div>
    </div>
<body>
</html>

如果你需要动画，比如褪色和东西，请问。

是否可以更改多个图像及其各自的鼠标悬停命令？

2 个答案: