个人中心
gpt4 book ai didi

javascript - 在 html 幻灯片中装箱

转载 作者：太空宇宙 更新时间：2023-11-03 23:36:36 25 4
gpt4 key购买 nike

我正在尝试在我的网站上创建幻灯片。到目前为止我有这个: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">&laquo;</span>
 <span class="next">&raquo;</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/

25 4 0
文章推荐： node.js - 如何在sqlite nodejs select查询中获取整个结果集？
文章推荐： iphone - 另一个速度提升可能吗？
文章推荐： node.js - 当 fs.ReadStream 暂停时，nodejs 是否会暂停从硬盘读取文件？
文章推荐： c - 运行时检查失败 #0
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com