我正在尝试在我的网站上创建幻灯片。到目前为止我有这个: JSFiddle:http://jsfiddle.net/StyloMonnik/8C8kD/16/ 官网:http://vanlunenadvies.nl/66-a9b0/chat
我正在尝试将其缩小到原来的 50%。在一个盒子里，我可以在我想要的文本之间和旁边找到它。问题是当我将所有内容减少到 50% 时，底部的栏不会减半。我还试图使底部的栏保持相同的高度。
如果有人有建议请告诉他们。我是编码新手，请用代码遮盖。我在将文本转换为代码时遇到了一些困难。但如果没有其他办法，宁可发短信。
此外，如果有人建议让它自动滑动。请给他们，我不能使用 jquery，我不能在网站上放置文件。只有文本和代码。 (我知道这很糟糕 :P )
正如他们在荷兰所说的那样， “贝丹特”
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by StyloMonnik</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
body {
margin: 0;
padding: 0;
height: 100%;
}
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #FF0000;
background: rgba(0,0,0, .25);
border-radius: 2px;
}
figcaption a{
color: #FF0000;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
p{
margin: 10px 20px;
color: #fff;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
(function () {
var counter = 0,
$items = document.querySelectorAll('.diy-slideshow figure'),
numItems = $items.length;
var showCurrent = function () {
var itemToShow = Math.abs(counter % numItems);
[].forEach.call($items, function (el) {
el.classList.remove('show');
});
$items[itemToShow].classList.add('show');
};
document.querySelector('.next').addEventListener('click', function () {
counter++;
showCurrent();
}, false);
document.querySelector('.prev').addEventListener('click', function () {
counter--;
showCurrent();
}, false);
})();
}//]]>
</script>
</head>
<body>
<div class="diy-slideshow">
<figure class=Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Molenstraat 28, 5451 BC Mill" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Advies</a>.</figcaption>
</figure>
<figure>
<img src="http://Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Etnalaan 9, 5801 KA Venray" by <a href="hSupposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Adviesgroep</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Beeksenhof 3, 5841 BA Oploo" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Adviesgroep</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation g" width="100%" />
<figcaption>"Korenbloemstraat 6, 5447 AE Rijkevoort" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Adviesgroep</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation " width="100%" />
<figcaption>"Emmastraat 1, 5451 ZE Mill" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Advies</a>.</figcaption>
</figure>
<figure>
<img src="Supposed to be a linnk but can only place 2 due to 2 low reputation width="100%" />
<figcaption>"Van Gelrestraat 35, 6591 HX Gennep" by <a href="Supposed to be a linnk but can only place 2 due to 2 low reputation ">Van Lunen Advies</a>.</figcaption>
</figure> <span class="prev">«</span>
<span class="next">»</span>
</div>
</body>
</html>
最佳答案
请用下面提供的 css 替换您的 css，我根据您的要求做了一些更改，这可能会给您您想要的。我在 diy-slideshow 类中添加了宽度，并针对右下角的图像名称位置对 figcaption 类进行了更改。
body {
margin: 0;
padding: 0;
height: 100%;
}
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
width: 50%;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
color: #FF0000;
background: rgba(0,0,0, .25);
border-radius: 2px;
bottom: 1.8em;
right: 3.5em;
}
figcaption a{
color: #FF0000;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
p{
margin: 10px 20px;
color: #fff;
}
关于javascript - 在 html 幻灯片中装箱，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23910977/