我对编码比较陌生，我正在尝试创建一个非常简单的幻灯片，只是我希望 javascript 在 css 中“链接”到我的图像 url，而不是将 div id 用于 html 中的图像。这可以做到吗，因为我似乎无法弄清楚。
基本上，我的网站有一系列图像缩略图，点击时会展开，因此具有垂直 Accordion 功能。 Accordion 是它自己的 div id，与 Accordion 有关的一切都保存在 div 类“容器”中，而图像，特别是在 div 类“包装器”中。所有的文本和链接都在 html 的正文中，图像都在 css 中。
我了解如何在 html 中创建图像幻灯片(只是旋转图像，没有可点击的图像/链接)，当我将图像从 css 移动到 html 时，幻灯片可以正常工作。然而，这样做之后，图像就不再属于 Accordion 的“规则”了。因此，我移动到 html 中的图像会旋转，但会与文本重叠，并且不再像 Accordion 的其余部分那样是图像切片。我可以使用 css 在页面上四处移动幻灯片图像，但它仍然与 Accordion 中的文本和其他功能重叠。
我什至尝试将 html 中的图像移动到 body 内的不同位置，以查看问题是否与图像放置的位置有关，但这并没有解决问题。
那么有没有一种方法可以使用 javascript 并将图像保留在 css 中，从而也保持 Accordion 功能？我坚持这个，不知道下一步该尝试什么。谢谢。
<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;
}
最佳答案
So is there a way to use javascript and keep the images in the css so the accordion features are also maintained?
要将图像保留在 CSS 中，请使用内联样式属性。而不是
<div>
<img src="images/testb.jpg" />
</div>
使用
<div class="image-wrap" style="background: url(images/testb.jpg)"></div>
然后使用 javascript 或在您的样式表中为 .image-wrap 设置正确的高度和宽度。
关于css - 使用 css 的 url 幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11894287/