个人中心
gpt4 book ai didi

javascript - 在 Javascript 上显示画廊

转载 作者：行者123 更新时间：2023-11-30 13:51:46 25 4
gpt4 key购买 nike

我在显示 demo-wrapper 下的图片库时遇到一些问题 我希望并排显示图像(水平)并且能够在没有按钮的情况下在它们之间滑动。我无法使用 flex 完成此操作，所以现在我尝试使用 javascript 来完成。目前我的引用脚本有一个基于箭头的按钮来改变图像之间的变化，但遗憾的是我无法控制图像并且我找不到我的错误。

我很乐意就如何使用下面的脚本或其他替代方法来完成此任务提出建议。

HTML:

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
      <head>
        <a name="top"></a>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>スタジオ</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script>
        $(document).ready(function() {
          Slider = $('#slider').Swipe({
            auto: 3000,
            continuous: true
          }).data('swipe');
          $('.next').on('click', Slider.next);
          $('.prev').on('click', Slider.prev);
        });
        </script>
      </head>

    <body>
      <div class="banner">スタジオ</div>
      <div class="header">NAME<br>LASTNAME.</div>

      <div class="pofabut">About</div>

      <div class="contact-social">

        <div class='github'>
              <a href="https://github.com/user" alt="github" target="_blank">
              <img width="19px" src="components/img/github.svg"/> </a>
        </div>

        <div class='instagram'>
          <a href="https://www.instagram.com/user" alt="instagram" target="_blank">
          <img width="20"  src="components/img/instagram.png"/> </a>
        </div>

        <div class='email'>
              <a href="mailto:email" alt="email" target="_blank">
              <img width="25px" src="components/img/email.png"/> </a>
        </div>

        <div class='linkedin'>
              <a href="" alt="linkedin-user" target="_blank">
              <img width="20px" src="components/img/linkedin.svg"/> </a>
        </div>
      </div>

      <div class="image-one">&nbsp;
         <img src="components/img/001.png" alt="landing_page_one"></div>
      <div class="circle">




      <div class="wd-name">01 DESIGN</div>

      <div class="demo-wrapper">
        <div id="slider" class="swipe">
          <div class="swipe-wrap">
            <div>
              <img src="components/img/wb-001.png" width="520" height="725">
            </div>
            <div>
              <img src="components/img/wb-002.png" width="520" height="725">
            </div>
            <div>
              <img src="components/img/wb-003.png" width="520" height="725">
            </div>
          </div>
          <span class="nav prev">Prev</span>
          <span class="nav next">Next</span>
        </div>
      </div>



    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    </html>

CSS:

            html,body {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow-x: hidden; 
            }

            @font-face{
                font-family:"shapiro-97-air-extd";
                src:url("https://fontsme.com/wp-data/s/566/15566/file/ogj-type-design-shapiro-97-air-extd.otf") format("woff"),
                url("https://fontsme.com/wp-data/s/566/15566/file/ogj-type-design-shapiro-97-air-extd.otf") format("opentype"),
                url("https://fontsme.com/wp-data/s/566/15566/file/ogj-type-design-shapiro-97-air-extd.otf") format("truetype");
            }
            @font-face {
              font-family: 'SHR97';
              src: url('components/typefaces/SHR97.otf') format('otf'),
            }
            @font-face {
              font-family: 'STT55';
              src: url('components/typefaces/STT55.otf') format('otf'),
            }
            /*Stem - Medium*/
            @font-face {
              font-family: 'STT65';
              src: url('components/typefaces/STT65.woff2') format('woff2');
            }
            /*Stem - bold*/
            @font-face {
                font-family: 'STT75';
                src: url('components/typefaces/STT75.woff2') format('woff2');
                }
            /*TTNorms - Thin*/
            @font-face {
                font-family: 'TTN45';
                src: url('components/typefaces/TTN45.woff2') format('woff2');
                }
            /*TTNorms - Regular*/
            @font-face {
                font-family: 'TTN55';
                src: url('components/typefaces/TTN55.otf') format('otf');
                }
            /*TTNorms - Medium*/
            @font-face {
                font-family: 'TTN65';
                src: url('components/typefaces/TTN65.otf') format('otf');
                }
            /*Avenir - RegularRoman*/
            @font-face {
                font-family: 'AV55';
                src: url('components/typefaces/AV55.woff2') format('woff2');
                }
            /*Avenir - DemiBold*/
            @font-face {
                font-family: 'AV65';
                src: url('components/typefaces/AV65.woff2') format('woff2');
                }

            .banner {
                font-family: 'STT55', sans-serif;
                font-style: normal;
                font-size: 1em;
                position: relative;
                left: 40px;
                top: 40px; 

            }

            .header { position: relative;
                font-family: 'shapiro-97-air-extd', sans-serif;
                font-size: 7.4em;
                letter-spacing: 0.8px;
                font-stretch: condensed;
                color:#D18B30;

                left: 90px;
                top: 360px; 
                margin: 0;
                padding: 0;
                z-index:-1;
            }

            .pofabut {
                font-family: 'TTN65', sans-serif;
                text-transform: uppercase;
                font-size: 0.7em;
                letter-spacing: 1px;
                line-height: 1.5;

                position: relative;
                left: 40px;
                top: 450px; 
            }

            .contact-social {
                display: flex;
                transform: translate(35px, 250px)}
            .instagram{
              margin: 5px;
              line-height: 90px;
              float: left; }
            .email{
              margin: 5px;
              line-height: 90px; }
            .github{
              margin: 5px;
              line-height: 90px; }
            .linkedin{
              margin: 5px;
              line-height: 90px;
            }

            .image-one { position: relative;
                left: 1050px;
                top: -400px;
                z-index:-3; }


            .circle{
                position: relative;
                width: 150px;
                height: 150px;
                background: url("components/img/002.png"); no-repeat;
                left: 700px;
                top:-550px;
            }
            .circle:hover{
                background: url("components/img/003.png"); no-repeat;}

            .first-footer-menu {
                font-family: 'TTN65', sans-serif;
                font-size: 0.9em;
                letter-spacing: 1px;
                line-height: 1.5;

                position: relative;
                left: 40px;
                top: 500px; }


            .wd-name{
                font-family: 'STT65', sans-serif;
                font-size: 3em;
                transform: translate(-610px, 400px);
            }

            .swipe {
              position: relative;
              max-width: 520px;
              width: 100%;
              height: 725px;
              margin: 100px auto 0;
            }

            .swipe-wrap {
              position: relative;
            }

            .swipe-wrap > div {
              float: left;
              width: 100%;
              position: relative;
            }

            .swipe .nav {
                position: absolute;
                width: 80px;
                height: 38px;
                z-index: 10;
                text-align: center;
                line-height: 40px;
                display: inline-block;
                color: #fff;
                top: 45%;
                cursor: pointer;
                background-color: rgba(0,0,0,0.8)
            }

            .swipe .nav.next {
                right: 0;
                -webkit-border-radius: 3px 0 0 3px;
                border-radius: 3px 0 0 3px;
            }

            .swipe .nav.prev {
                -webkit-border-radius: 0 3px 3px 0;
                border-radius: 0 3px 3px 0;
            }

最佳答案

调用前需要添加 slider 库。您的代码应如下所示

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>スタジオ</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="banner">スタジオ</div>
    <div class="header">NAME
        <br>LASTNAME.</div>

    <div class="pofabut">About</div>

    <div class="contact-social">

        <div class='github'>
            <a href="https://github.com/user" alt="github" target="_blank">
                <img width="19px" src="components/img/github.svg" /> </a>
        </div>

        <div class='instagram'>
            <a href="https://www.instagram.com/user" alt="instagram" target="_blank">
                <img width="20" src="components/img/instagram.png" /> </a>
        </div>

        <div class='email'>
            <a href="mailto:email" alt="email" target="_blank">
                <img width="25px" src="components/img/email.png" /> </a>
        </div>

        <div class='linkedin'>
            <a href="" alt="linkedin-user" target="_blank">
                <img width="20px" src="components/img/linkedin.svg" /> </a>
        </div>
    </div>

    <div class="image-one">&nbsp;
        <img src="components/img/001.png" alt="landing_page_one"></div>
    <div class="circle">

        <div class="wd-name">01 DESIGN</div>

        <div class="demo-wrapper">
            <div id="slider" class="swipe">
                <div class="swipe-wrap">
                    <div>
                        <img src="components/img/wb-001.png" width="520" height="725">
                    </div>
                    <div>
                        <img src="components/img/wb-002.png" width="520" height="725">
                    </div>
                    <div>
                        <img src="components/img/wb-003.png" width="520" height="725">
                    </div>
                </div>
                <span class="nav prev">Prev</span>
                <span class="nav next">Next</span>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="//cdn.jsdelivr.net/gh/lyfeyaj/swipe/swipe.js"></script>
        <script>
            $(document).ready(function() {
                Slider = $('#slider').Swipe({
                    auto: 3000,
                    continuous: true
                }).data('swipe');
                $('.next').on('click', Slider.next);
                $('.prev').on('click', Slider.prev);
            });
        </script>
</body>

</html>

我已经删除了不需要的js文件，如果你需要在页面的其他部分添加它们。

我已经在以下 URL 为您创建了一个要点

https://gist.github.com/sgssandhu/5df852e95402784d63210f8016100060

如果您在运行中还有任何问题，请随时发表评论

关于javascript - 在 Javascript 上显示画廊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58102874/

25 4 0
文章推荐： javascript - 对计算的 Vue 属性使用条件
文章推荐： javascript - 如何访问 p5.js Canvas 上的实时草图图像？
文章推荐： ios - 解析本地数据存储仅返回一个对象
文章推荐： javascript - 如何在 jQuery 中对具有一个共同特定属性的两个对象的值求和？
行者123
个人简介

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

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