0

感谢您的关注，我有这个计划，我想创建一个画廊，其中我的主图像可以通过将鼠标悬停在一堆 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">

而且我想它可以扩展到多个图像。但是，不必这样做，只要效果最好，它就会使一个鼠标悬停更改多个当前超出我能力的鼠标悬停命令。

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

非常感谢指向正确方向的指针。

4

2 回答 2

0

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

于 2012-05-16T12:24:50.463 回答
0

这实际上是在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>

如果您需要动画，例如淡入淡出之类的东西，请询问。

于 2012-05-16T12:26:28.853 回答