0

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

基本上，我的网站有一系列图像缩略图，当前单击时会展开，因此是垂直手风琴功能。手风琴是它自己的 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;
}
4

2 回答 2

0

那么有没有办法使用 javascript 并将图像保存在 css 中，以便还保留手风琴功能？

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

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

利用

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

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

于 2012-08-11T01:06:02.513 回答
0

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

本质上它解析 $('img').css('background-image');

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

于 2012-08-11T01:14:12.577 回答