Question

我正在使用VS2010，C＃为公司开发一个小型企业ASP.NET Web应用程序，我创建了一个历史页面，我将使用JavaScript开发一个简单的照片幻灯片（如果可能的话，没有JQuery）），有没有现成的图书馆？显示小图像缩略图的内容以及用户将鼠标悬停在每个图像上的东西，会显示更大版本的图像，如何创建或找到这样的工具？

感谢

Answer 1

jQuery只是一个JavaScript包装器（本质上），所以你将绕过它带来的一些便利。话虽这么说，他们在那里有大量的库存可以做你正在做的事情。建立自己也不会那么困难。这里有几个要考虑的事情（首先考虑会让你免于感到愚蠢！）

这里没有多少魔法......你只想看看'onmouseover || onclick'事件，当缩略图图像被'moused over ||时单击'，你需要获得一些基本坐标，然后显示一个div，其中较大的图像悬停在较小的图像上（你应该使用2个图像（一个小图像，一个大图像），你应该在上传时在磁盘上创建它们或图像创建（文件流也有效，但如果它们是静态图像（缓存？），你会花多少时间花在它上面，效率很低，哈哈）。

要正确放置较大图像的位置，您要么想要动态添加div，其内容是大图像，要么显示/隐藏已加载较大图像的隐藏div（这样图像已经可以加载，但它会加载所有即使不需要，再次，多少时间），你可以隐藏这些在DOM的某个地方。然后通过将较大的悬停图像位置设置为“绝对”，并且很可能是最前面的“z-index”，您可以在缩略图图像上显示较大的图像。

您可以使用活动的较小图像位置作为基本坐标，或使用鼠标指针相对于被“鼠标悬停”的div的位置点击'取决于您希望功能如何工作

无论如何，就像之前所说过的那样，有很多lib会出现这种情况。这很长一段时间以来一直是理想的功能，你很可能会重新发明轮子。但是，知道如何创建一个轮子并没有错。

http://highslide.com/

http://www.admixweb.com/2010/03/08/how-to-create-a-fancy-image-gallery-with-css3/

谷歌也会提供帮助：“纯粹的javascript图片滑块”

Answer 2

是的，有很多现成的解决方案，你当然可以建立自己的解决方案。这里的技巧是将DOM类分配给大图像和缩略图，并在应用程序启动时，仅显示第一个图像。然后在鼠标上方向第二个大图像添加一个类，该图像将显示此图像，并在类之前显示一个隐藏它的图像。正如我所说，有很多教程和准备好的脚本。

http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/

http://www.ehow.com/how_6457406_javascript-gallery-tutorial.html

Answer 3

如果您同时拥有缩略图文件和放大文件（或者如果它最初是大型的，并且您可以将其缩小以创建缩略图，则可以使用Javascript），而不是使用Javascript，您可以使用CSS更易于访问的解决方案，因为没有Javascript的用户代理仍然可以使用该功能。这样的解决方案还假设除了交换图像之外，您不需要任何额外的交互。

要使用CSS交换图像，最好为图像设置容器元素，例如div（虽然在语义上不正确，但这使得这种交互更容易）：

<div id="thumbnail">
</div>

#thumbnail
{
  background-image:url("{URL to image, relative to the CSS}");
}
/*Use :hover pseudo-class to detect hover events*/
#thumbnail:hover
{
  background-image:url("{Replacement image URL}");
}

请注意：hover伪类在IE6中不起作用，除非应用于锚元素，但是现在很少支持IE6，但仍然很有用。

Answer 4

这可能会对你有所帮助。这是示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #nav
        {
            margin: 20px auto;
        }
        #nav a
        {
            padding: 4px 6px;
            margin: 3px;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration: none;
            background-color: #ddd;
        }
        #nav a.activeSlide
        {
            color: #c00;
        }
        #nav a:focus
        {
            outline: none;
        }

        .slideshow
        {
            margin: 20px auto;
            padding: 0;
            clear: left;
        }
        .slide
        {
            margin: 0;
            padding: 0;
        }
        .slideshow, .slide
        {
            height: 232px;
            width: 710px;
        }
        .slideshow img
        {
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #eee;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"> </script>
    <script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
    <script type="text/javascript">


        $(function () {
            $('#main').cycle({

                fx: 'cover',
                speed: 500,
                timeout: 2000

            });
        });

        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'scrollLeft',
                timeout: 0,
                pager: '#nav'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <fieldset>
        <legend>Cover Effect</legend>
        <div id="main" style="width: 200px; height: 300px">
            <img src="Images/bamboo.jpg" style="width: 200px; height: 300px" />
            <img src="Images/ceynote.jpg" style="width: 200px; height: 300px" />
            <img src="Images/cypress.jpg" style="width: 200px; height: 300px" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Grouping div</legend>
        <div style="margin: auto; text-align: center">
            <div id="nav">
            </div>
        </div>
        <div class="slideshow">
            <div class="slide">
                <img src="Images/firefox-512-200x200.png" width="200" height="200" />
                <img src="Images/iguana.jpg" width="200" height="200" />
                <img src="Images/josh-ships.jpg" width="200" height="200" />
            </div>
            <div class="slide">
                <img src="Images/bamboo.jpg" width="200" height="200" />
                <img src="Images/ceynote.jpg" width="200" height="200" />
                <img src="Images/cypress.jpg" width="200" height="200" />
            </div>
            <div class="slide">
                <img src="Images/jungle.jpg" width="200" height="200" />
                <img src="Images/palmtree.jpg" width="200" height="200" />
                <img src="Images/iguana.jpg" width="200" height="200" />
            </div>
        </div>
    </fieldset>
    </form>
</body>
</html>

您可以从此链接下载图片幻灯片放映asp.net示例。 Click Here...

使用javascript创建照片幻灯片

4 个答案: