使用 css 的 url 幻灯片答案

【问题标题】：url slideshow using css使用 css 的 url 幻灯片
【发布时间】：2012-08-07 07:41:12
【问题描述】：

我对编码比较陌生，我正在尝试创建一个非常简单的幻灯片，只是我希望 javascript 被“链接”到我在 css 中的图像 url，而不是在 html 中使用 div id 的图像。可以这样做吗，因为我似乎无法弄清楚。

基本上，我的网站有一系列图像缩略图，当前单击时会展开，因此具有垂直手风琴功能。手风琴是它自己的 div id，与手风琴有关的一切都保存在 div 类“容器”中，而图像，特别是在 div 类“包装器”中。所有的文本和链接都在 html 的正文中，图像都在 css 中。

我了解如何在 html 中创建图像幻灯片（仅旋转图像，没有可点击的图像/链接），并且当我将图像从 css 移动到 html 时，幻灯片可以正常工作。然而，在这样做之后，图像不再在手风琴的“规则”之内。因此，我移动到 html 中的图像会旋转，但会与文本重叠，并且不再像手风琴的其余部分那样是图像切片。我可以使用 css 在页面上移动幻灯片图像，但它仍然与手风琴内的文本和其他功能重叠。

我什至尝试将 html 中的图像移动到正文中的不同位置，以查看问题是否与图像放置的位置有关，但这并没有解决问题。

那么有没有办法使用 javascript 并将图像保存在 css 中，这样手风琴的功能也得以保留？我被困住了，不知道下一步该尝试什么。谢谢。

<body>
<div class="container">
<h1 class="va-name"><a href="avatest.html"> Amy Danielsons</a>                          </h1>
<h2 class="va-contact">Contact</h2>
<h3 class="va-resume"><a href="resume.html">Resume</a>
<h4 class="va-about">About</h4>
<h5 class="va-port"><a href="#">Online Portfolio</h5>
<h6 class="va-hatch"><img src="images/pattern.png" width="10"       height="10"     alt="hatch" />
</h6>

<div id="va-accordion" class="va-container">

            <div class="va-nav">
                <span class="va-nav-prev">Previous</span>
                <span class="va-nav-next">Next</span>
            </div>

            <div class="va-wrapper">
                <div class="va-slice va-slice-1">
                <!--slider 1 images -->

                <div>
                <img src="images/testa.jpg" />
                </div>

                <div>
                <img src="images/testb.jpg" />
                </div>

                <div>
                <img src="images/testc.jpg" />
                </div>

                    <h3 class="va-title">Cranbrook</h3>
                    <div class="va-content">
                        <p>Paragraph Title</p>
                        <p2>dolor sit amet, consectetur      adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p2>

                    </div>
                </div>
              </div>

（下面的css部分：你可以看到我删除了第一个图像切片的url并将图像（并添加了另外2个图像）移动到上面的html中）

}
.va-slice-1{
background:#FFF
}
.va-slice-2{
background:#FFF url(../images/2d/liz.jpg) no-repeat center center;
}
.va-slice-3{
background:#FFF url(../images/2d/oldcar.jpg) no-repeat center center;
}

【问题讨论】：

我已经读了大约三遍了，但我仍然无法弄清楚您希望您的页面实际做什么。能画个图吗？
我真的不知道如何绘制我所要求的图表。但我可以试着解释得更好一点。我想做的就是在css而不是html中制作一个图像幻灯片。我想使用 css 中的 url 将幻灯片图像链接到幻灯片的 javascript，而不是使用 div id 的 html 中的图像。我不知道这是否可能？
上图展示了手风琴的基本理念。当您单击其中一个图像切片时，它会展开以显示完整图像，并在图像左侧显示一些文本。我想要做的就是让放大的图像在您阅读时以幻灯片的形式滚动浏览一系列相关图像。
问题是，我一直在使用的手风琴将所有图像保留在 css 页面中，而不是 hmtl，我可以让幻灯片工作的唯一方法是将图像移动到 html作为 div id 的。这导致手风琴破裂，因为我移动到 html 的图像将不再遵守手风琴的规则。如上图所示：最上面的图片切片是唯一添加了幻灯片效果的图片（在html中，因为我不知道怎么做）。
您想要 Javascript 中的 URL？像 $('img').attr('href') ？这将使您将图像的 url 转换为 Javascript var 以供使用。您能否提供一个演示或其他内容的网址，以便我们查看更多代码？

标签： css image url slider

【解决方案1】：

那么有没有办法使用 javascript 并将图像保存在 css 中，这样手风琴的功能也得以保留？

要将图像保留在 CSS 中，请使用内联样式属性。而不是

            <div>
            <img src="images/testb.jpg" />
            </div>

使用

<div class="image-wrap" style="background: url(images/testb.jpg)"></div>

然后使用 javascript 或在样式表中为 .image-wrap 设置正确的高度和宽度。

【讨论】：

您也应该创建一个 jsfiddle 示例。这样可以更轻松地为您提供帮助！
如何为幻灯片获得多个图像？在上面的示例中，您的网址中似乎只有一张图片。我需要创建多个 url 列表吗？或者您能否举例说明您的代码在使用多张图片时的样子？
这里是修改后的内联样式属性。如何为幻灯片获取多张图片？您的示例仅允许使用一张图片？ '代码'

上一个下一个

【解决方案2】：

虽然我和其他人一样不完全了解您的情况，但this article 解释了如果您使用 jQuery，如何获取背景图像的 URL。

本质上它解析 $('img').css('背景图片');

要设置 URL，请使用 $('img').css('background-image', 'url:("http://www.example.com/image.png")');

【讨论】：