javascript - 试图让我的照片幻灯片不断循环播放所有照片-6ren

javascript - 试图让我的照片幻灯片不断循环播放所有照片

转载作者：行者123 更新时间：2023-11-28 04:04:51

我的网站在标题下方的其中一个部分中有照片幻灯片。当幻灯片播放到第三张照片时停止。我想知道如何将第三张照片转换回第一张照片，然后在所有照片中使用相同的动画继续循环？动画是下一张照片从当前照片的右侧滑入。我的代码如下。

HTML
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <style>
        body {
            margin: 0;
        }

        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }

        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }

        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }

        .photoSection {
            position: relative;
            background-color: black;
            overflow: hidden;
        }

        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.8s;
        }
    </style>
</head>

<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Some Title</h1></a>
        <style>
            a{text-decoration: none}
        </style>

    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>
    <div class="photoSection">
        <img class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
        <img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
        <img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
    </div>

<div class="section1" style = "background-color: black; color: white; padding-top: 150px;" >
    <a class = "header1" style="padding-left: 200px; display:inline-block; width:85.2%">
        <img src = "FoldingIcon.PNG">
        <h1 style = "font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
        <p style = "margin-bottom: 200px; font-family: Verdana; color: gray;">
        </p>
        <img src="Backpack.PNG">
        <h2 style = "font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
        <p style = "margin-bottom: 300px"></p>
    </a>
    <p style = "color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
        ____________________________________________________________________________________________________________________________________________________________</p>
</div>

<div class = "section2" style = "background-color: black; color: white; padding-bottom: 500px;">

</div>
<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        myIndex++;
        if (myIndex > x.length) {
            myIndex = 1
            x[myIndex - 1].style.right;
        }
        else {
            x[myIndex - 1].style.left = "0";
        }

        // you may want to add transition-delay , z-index, ... to tune sliding effect
        setTimeout(carousel, 4000); // Change image every 2 seconds
    }
</script>

最佳答案

添加一个名为 .no_trans 的 css 类，它将禁用转换。该类将具有以下规则

.no_trans{
  transition:none !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
}

当计数器大于号时。您禁用的图像删除过渡类并反转图像的位置(这将很快)

然后计数器以编号开始。小于号自您将其重置为 0 后的元素数量

进程重启

.no_trans {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

HTML
<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
  <style>
    body {
      margin: 0;
    }
    
    .Header {
      position: fixed;
      z-index: 1;
      width: 100%;
      height: 70px;
      background-color: black;
      text-align: right;
    }
    
    .socialmedia {
      position: fixed;
      right: 100px;
      top: 35px;
      transform: translate(0, -50%);
      display: flex;
      /* add this */
      align-items: center;
      /* add this */
    }
    
    .preorder button {
      background-color: white;
      border: 0;
      height: 35px;
      width: 110px;
      margin-left: 35px;
    }
    
    .footer {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90px;
      background-color: black;
    }
    
    .photoSection {
      position: relative;
      background-color: black;
      overflow: hidden;
    }
    
    .mySlides~.mySlides {
      position: absolute;
      top: 0;
      left: 100%;
      transition: 0.8s;
    }
  </style>
</head>

<body>

  <div class="Header" id="myHeader">
    <a class="headerLogo">
      <a href="file:///C:/Noah's%20stuff/Home.html">
        <h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Some Title</h1>
      </a>
      <style>
        a {
          text-decoration: none
        }
      </style>

    </a>
    <div class="socialmedia">
      <a class="Facebook">
        <a href="https://www.facebook.com/" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
      </a>
      <a class="Instagram">
        <a href="https://www.instagram.com/"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
      </a>
      <a class="Youtube">
        <a href="https://www.youtube.com/channel/" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
      </a>
      <a class=p reorder>
        <button style="background-color: white;">Pre-Order</button>

      </a>
    </div>
  </div>
  <div class="photoSection">
    <img class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
    <img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
    <img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
  </div>

  <div class="section1" style="background-color: black; color: white; padding-top: 150px;">
    <a class="header1" style="padding-left: 200px; display:inline-block; width:85.2%">
      <img src="FoldingIcon.PNG">
      <h1 style="font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
      <p style="margin-bottom: 200px; font-family: Verdana; color: gray;">
      </p>
      <img src="Backpack.PNG">
      <h2 style="font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
      <p style="margin-bottom: 300px"></p>
    </a>
    <p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
      ____________________________________________________________________________________________________________________________________________________________</p>
  </div>

  <div class="section2" style="background-color: black; color: white; padding-bottom: 500px;">

  </div>
  <script>
    var myIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      myIndex++;
      //console.log(myIndex);
      if (myIndex > x.length) {
        for (var y = 0; y < x.length; ++y) {
          x[y].classList.add("no_trans");
          x[y].style.left = "100%";
          myIndex = 0;
        }
      } else {
        x[myIndex - 1].classList.remove("no_trans");
        x[myIndex - 1].style.left = "0";
      }

      // you may want to add transition-delay , z-index, ... to tune sliding effect
      setTimeout(carousel, 4000); // Change image every 2 seconds
    }
  </script>

关于javascript - 试图让我的照片幻灯片不断循环播放所有照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43009705/

文章推荐： javascript - 在固定元素上滚动列表

文章推荐： c++ - 使用 sscaf_s 从 obj 读取顶点线不起作用

文章推荐： c++ - 在哪里定义编译时常量？

文章推荐： html - 发现哪个 CSS 规则负责任何元素的格式

javascript - 照片 slider
随机问题，...但是有人知道这里使用的是什么照片 slider 吗？ http://www.rolandgarros.com/en_FR/index.html 或这里: http://www.theg
JavaScript 照片 slider
我正在制作一个 JS 脚本，它将进入标题 div 并显示一些图片。我查看了 JQuery Cycle，但它超出了我的范围。我在下面编写的代码卡住了浏览器，我应该使用带有计时器变量的 for 循环吗？
PHP 照片/文件上传问题
我在四处寻找，因为我在 PHP 文件上传方面遇到了一些问题!如果用户想要或显示已存储在数据库中的照片，我正在尝试将一张或三张照片上传到数据库(admin_images)。我遇到了一些问题，下面是我目前
ios - 如何快速拍摄高质量的视频/照片？
如何提高相机质量？我想拍一张全屏显示的照片/视频吗？如果我将 session 预设设置为 AVCaptureSessionPresetPhoto，它是高质量和全屏的，但仅适用于照片而不适用于视频。我已
iphone - 如何从ios应用程序连接到本地WIFI并传输信息/照片
我还没有看到有人问过这个问题，所以我问一下如何在iOS应用程序(Xcode)中通过WIFI传输信息/图像。例如:如果我正在用带WIFI的相机翻阅图片，我如何去iPhone看图片？例如像这个视频:
java - 照片/图像到草图算法
有没有人有关于如何将照片和图像(位图)转换为类似草图的图片的想法、链接、库、源代码...？我找不到任何关于如何做到这一点的好消息来源。我找到了这个链接 How to cartoon-ify an i
instagram - 在我的网站中显示我的 Instagram 照片
假设我有一个 Instagram 帐户和一个网站。我想在网站上显示来自我的 Instagram 帐户的最新照片。我在文档中不清楚的东西:为了得到我的 access_token我需要验证自己的身份吗？我
API:按方向获取 Flickr 照片
我只想从 Flickr 获取风景照片，但我没有看到任何允许我这样做的参数。有谁知道有没有办法？最佳答案在来自 flickr.photos.search 的回复中功能，您可以指定许多可选参数，称为
api - Google+ 照片 API
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 3年前关闭。 Improve thi
Instagram Square 照片 API
Instagram 会提供任何方式通过 API 获取人像/风景吗？ API 文档看起来未受影响。截至目前，他们仍然返回纵向图像的正方形大小，但 api 文档没有提供任何获取原始图像的方法。他们会继
facebook - 如何检索标记某人的所有 Facebook 照片
我知道您可以将限制和偏移值附加到 graph.facebook.com/id/photos API 调用中以对照片进行分页。但大的限制似乎效果不佳，照片最终会丢失。我在这里读到 limit=0 为您提
instagram - 根据主题标签抓取 Instagram 照片
我是 Instagram 新手，我的任务是编写一个应用程序来根据特定主题标签抓取 Instagram 照片上传。这意味着如果应用程序启动并搜索主题标签“#awesomeevent”，任何上传带有该主题
ios - 按关键字搜索 iOS 照片？
苹果的照片应用程序允许用户使用“冲浪”、“食物”、“天空”等搜索关键字查询照片。具有相机和照片权限的第三方 iOS 应用程序如何使用任意字符串搜索手机的相机胶卷？ Searching for Pho
php - 避免拉伸(stretch)照片
如何避免照片拉伸(stretch)？ PHP 从文件夹中随机选择 2 张照片并使用 echo 显示它们。但是现在，所有纵向照片都被拉伸(stretch)了。 "; unset($images[
ios - 如何将UIImagePickerController限制为仅拍摄人像模式(深度效果)照片？
我正在构建一个处理以人像模式(深度效果)拍摄的图像的应用程序。我需要提供UIImagePickerController以仅显示具有深度效果的照片。我该如何实现？最佳答案使用UIImagePick
ios - 如何从ALASSET照片库中获取第一张(最新)照片？
通过编程从iOS照片库获取最新照片是否有技巧？我知道我可以按日期搜索，但是我必须每隔一微秒进行一次扫描，以便进行某种比较以准确地找到它。有没有人做过这个或任何想法？最佳答案我之前采取的一种方法
php - Facebook 照片 API
我在尝试使用 Facebook 的 Javascript API 时遇到严重问题。我目前有一个有点功能的 facebook 登录，我希望能够从当前用户那里获取所有照片，并将它们显示在 strip 中。
java - 按标签搜索 FlickR 照片
我正在尝试查询 FlickR 照片并接收 JSON 响应。我正在使用 Retrofit 调用 FlickR API。在我的代码中，用户输入文本，这是通过 EditText 捕获的。我想根据这个词查询。
android - 捕获一些对象并创建 3d 照片
我想为使用像应用程序这样的相机捕获的对象创建 3d View (360 度 View )Fyuse或 Phogy正在做。我对此进行了研究，但没有发现有用的东西。我有一些问题，例如: 为此我应该使用什
iphone - 如何检查我是否自己拍摄了 iPhone 照片？
当我从 iPhone 导入图片时，它们最终都在一个巨大的文件列表中:IMG_4649.JPG、IMG_4650.JPG、IMG_4651.PNG , …有自己拍的， friend 给的，下载的，截图的

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 试图让我的照片幻灯片不断循环播放所有照片