图片轮播大全

最新推荐文章于 2024-07-10 16:57:46 发布
最新推荐文章于 2024-07-10 16:57:46 发布
阅读量442 收藏 9
点赞数 8
文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34045989/article/details/135733685
版权

案例1：上下轮播切割重组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
        font-family: "Sen";
      }
      * {
        box-sizing: border-box;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        cursor: none;
        user-select: none;
        -webkit-user-drag: none;
      }
      #main {
        display: flex;
      }
      #main .part {
        flex: 1;
      }
      #main .part .section {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
      #main .part .section img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: absolute;
        left: var(--x);
        pointer-events: none;
      }
      .cursor {
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: white;
        position: absolute;
        z-index: 999;
        pointer-events: none;
        mix-blend-mode: difference;
      }
      .cursor-f {
        width: var(--size);
        height: var(--size);
        position: absolute;
        top: 0;
        left: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/%3E%3C/svg%3E%0A");
        background-size: cover;
        mix-blend-mode: difference;
        pointer-events: none;
        opacity: 0.5;
      }
      .buttons {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
      }
      .buttons button {
        border: none;
        background-size: contain;
        background: url("data:image/svg+xml,%3Csvg width='10' height='29' viewBox='0 0 10 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0V27L1 17.4857' stroke='white' stroke-width='2' /%3E%3C/svg%3E%0A")
          no-repeat;
        background-position: center;
        width: 10px;
        height: 30px;
        display: block;
        margin: 20px 0;
        padding: 0 15px;
        transition-duration: 0.6s;
      }
      .buttons button.next {
        transform: scaleY(-1);
      }
      .buttons button.prev:active {
        transform: translateY(8px);
      }
      .buttons button.next:active {
        transform: scaleY(-1) translateY(8px);
      }
      h1 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: auto;
        z-index: 99;
        color: white;
        text-align: center;
        font-size: 2.6em;
        mix-blend-mode: overlay;
        pointer-events: none;
      }
      .content {
        width: 90%;
        position: absolute;
        bottom: 20px;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
        color: white;
        z-index: 99;
        font-size: 0.8em;
      }
      .content p {
        margin: 0.5em auto;
      }
      .content kbd {
        width: 15px;
        height: 15px;
        border: 1px solid white;
        display: inline-block;
        border-radius: 3px;
        font-size: 0.9em;
        vertical-align: text-top;
      }
      .content a {
        color: rgba(227, 227, 227, 0.78);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
      }
      .content a:hover {
        padding-bottom: 1px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>something</h1>
      <div class="content">
        <p>
          You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe
          up/down to navigate. Mouse wheel works too.
        </p>
      </div>
      <div class="buttons">
        <button class="next" onclick="go(-1)"></button>
        <button class="prev" onclick="go(1)"></button>
      </div>
    </div>
    <script src="gsap.min.js"></script>

    <script>
      const cols = 3;
      const main = document.getElementById("main");
      let parts = [];

      let images = [
        "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",
        "https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",
        "https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80",
      ];
      let current = 0;
      let playing = false;

      for (let i in images) {
        new Image().src = images[i];
      }

      for (let col = 0; col < cols; col++) {
        let part = document.createElement("div");
        part.className = "part";
        let el = document.createElement("div");
        el.className = "section";
        let img = document.createElement("img");
        img.src = images[current];
        el.appendChild(img);
        part.style.setProperty("--x", (-100 / cols) * col + "vw");
        part.appendChild(el);
        main.appendChild(part);
        parts.push(part);
      }

      let animOptions = {
        duration: 2.3,
        ease: Power4.easeInOut,
      };

      function go(dir) {
        if (!playing) {
          playing = true;
          if (current + dir < 0) current = images.length - 1;
          else if (current + dir >= images.length) current = 0;
          else current += dir;

          function up(part, next) {
            part.appendChild(next);
            gsap
              .to(part, { ...animOptions, y: -window.innerHeight })
              .then(function () {
                part.children[0].remove();
                gsap.to(part, { duration: 0, y: 0 });
              });
          }

          function down(part, next) {
            part.prepend(next);
            gsap.to(part, { duration: 0, y: -window.innerHeight });
            gsap.to(part, { ...animOptions, y: 0 }).then(function () {
              part.children[1].remove();
              playing = false;
            });
          }

          for (let p in parts) {
            let part = parts[p];
            let next = document.createElement("div");
            next.className = "section";
            let img = document.createElement("img");
            img.src = images[current];
            next.appendChild(img);

            if ((p - Math.max(0, dir)) % 2) {
              down(part, next);
            } else {
              up(part, next);
            }
          }
        }
      }

      window.addEventListener("keydown", function (e) {
        if (["ArrowDown", "ArrowRight"].includes(e.key)) {
          go(1);
        } else if (["ArrowUp", "ArrowLeft"].includes(e.key)) {
          go(-1);
        }
      });

      function lerp(start, end, amount) {
        return (1 - amount) * start + amount * end;
      }

      const cursor = document.createElement("div");
      cursor.className = "cursor";

      const cursorF = document.createElement("div");
      cursorF.className = "cursor-f";
      let cursorX = 0;
      let cursorY = 0;
      let pageX = 0;
      let pageY = 0;
      let size = 8;
      let sizeF = 36;
      let followSpeed = 0.16;

      document.body.appendChild(cursor);
      document.body.appendChild(cursorF);

      if ("ontouchstart" in window) {
        cursor.style.display = "none";
        cursorF.style.display = "none";
      }

      cursor.style.setProperty("--size", size + "px");
      cursorF.style.setProperty("--size", sizeF + "px");

      window.addEventListener("mousemove", function (e) {
        pageX = e.clientX;
        pageY = e.clientY;
        cursor.style.left = e.clientX - size / 2 + "px";
        cursor.style.top = e.clientY - size / 2 + "px";
      });

      function loop() {
        cursorX = lerp(cursorX, pageX, followSpeed);
        cursorY = lerp(cursorY, pageY, followSpeed);
        cursorF.style.top = cursorY - sizeF / 2 + "px";
        cursorF.style.left = cursorX - sizeF / 2 + "px";
        requestAnimationFrame(loop);
      }

      loop();

      let startY;
      let endY;
      let clicked = false;

      function mousedown(e) {
        gsap.to(cursor, { scale: 4.5 });
        gsap.to(cursorF, { scale: 0.4 });

        clicked = true;
        startY =
          e.clientY || e.touches[0].clientY || e.targetTouches[0].clientY;
      }
      function mouseup(e) {
        gsap.to(cursor, { scale: 1 });
        gsap.to(cursorF, { scale: 1 });

        endY = e.clientY || endY;
        if (clicked && startY && Math.abs(startY - endY) >= 40) {
          go(!Math.min(0, startY - endY) ? 1 : -1);
          clicked = false;
          startY = null;
          endY = null;
        }
      }
      window.addEventListener("mousedown", mousedown, false);
      window.addEventListener("touchstart", mousedown, false);
      window.addEventListener(
        "touchmove",
        function (e) {
          if (clicked) {
            endY = e.touches[0].clientY || e.targetTouches[0].clientY;
          }
        },
        false
      );
      window.addEventListener("touchend", mouseup, false);
      window.addEventListener("mouseup", mouseup, false);

      let scrollTimeout;
      function wheel(e) {
        clearTimeout(scrollTimeout);
        setTimeout(function () {
          if (e.deltaY < -40) {
            go(-1);
          } else if (e.deltaY >= 40) {
            go(1);
          }
        });
      }
      window.addEventListener("mousewheel", wheel, false);
      window.addEventListener("wheel", wheel, false);
    </script>
  </body>
</html>

案例2：左右轮播（传统方式，最常见的一种）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
      }

      #slider-container {
        position: relative;
        width: 600px;
        height: 400px;
        overflow: hidden;
      }

      #image-slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
        height: 100%;
      }

      .slide {
        min-width: 100%;
        box-sizing: border-box;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      #prev,
      #next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        cursor: pointer;
        color: #333;
        background-color: #fff;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      #prev {
        left: 10px;
      }

      #next {
        right: 10px;
      }

      .indicator-container {
        position: absolute;
        bottom: 15px;
        padding: 5px 5px;
        left: 50%;
        transform: translateX(-50%); /* 使用负的50%的平移来实现水平居中 */
        width: auto;
        height: auto;
        border-radius: 7px;
        background: rgba(158, 154, 154, 0.7);
        display: flex;
        justify-content: space-between;
      }

      .indicator {
        width: 8px;
        height: 8px;
        margin: 0 10px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
      }

      .indicator.selected {
        background-color: rgb(255, 153, 0);
      }
    </style>
  </head>
  <body>
    <div id="slider-container">
      <div id="image-slider">
        <div class="slide">
          <img
            src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/08/0A/ChMkLGPgV8yIByPqAEBpHxFxY58AAMhuQO39iYAQGk3263.jpg"
            alt="Slide 1"
          />
        </div>
        <div class="slide">
          <img
            src="https://b.zol-img.com.cn/desk/bizhi/image/11/960x600/1675646737470.jpg"
            alt="Slide 2"
          />
        </div>
        <div class="slide">
          <img
            src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/08/0A/ChMkLGPgV-iID9g0AEjGoSWnrl4AAMhvAH0En8ASMa5359.jpg"
            alt="Slide 3"
          />
        </div>
        <!-- Add more slides as needed -->
        <div class="slide">
          <img
            src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/08/0A/ChMkLGPgV8yIByPqAEBpHxFxY58AAMhuQO39iYAQGk3263.jpg"
            alt="Slide 1"
          />
        </div>
      </div>
      <div id="prev" onclick="changeSlide(-1)">❮</div>
      <div id="next" onclick="changeSlide(1)">❯</div>
      <div class="indicator-container">
        <div class="indicator selected" onclick="changeSlideTo(0)"></div>
        <div class="indicator" onclick="changeSlideTo(1)"></div>
        <div class="indicator" onclick="changeSlideTo(2)"></div>
        <!-- Add more indicators as needed -->
      </div>
    </div>

    <script>
      let currentSlide = 0; // 当前幻灯片索引
      const totalSlides = document.querySelectorAll(".slide").length - 1; // 幻灯片总数（减去克隆的一张）
      const slider = document.getElementById("image-slider"); // 幻灯片容器元素
      const indicators = document.querySelectorAll(".indicator");
      const slidercontainer = document.getElementById("slider-container");
      // 切换幻灯片
      function changeSlide(direction) {
        currentSlide += direction; // 更新当前幻灯片索引

        if (currentSlide > totalSlides) {
          // 如果当前索引超过最大索引，执行无缝循环
          slider.style.transition = "none"; // 去掉过渡效果
          currentSlide = 0; // 回到第一张幻灯片
          slider.style.transform = "translateX(0)"; // 瞬间移动到第一张的位置
          setTimeout(() => {
            slider.style.transition = "transform 0.5s ease-in-out"; // 恢复过渡效果
            currentSlide += direction; // 更新索引
            translateSlider(); // 移动到下一张幻灯片
          }, 0);
        } else if (currentSlide < 0) {
          // 如果当前索引小于0，执行无缝循环
          slider.style.transition = "none"; // 去掉过渡效果
          currentSlide = totalSlides; // 移动到最后一张幻灯片
          slider.style.transform = "translateX(" + -totalSlides * 100 + "%)"; // 瞬间移动到最后一张的位置
          setTimeout(() => {
            slider.style.transition = "transform 0.5s ease-in-out"; // 恢复过渡效果
            currentSlide += direction; // 更新索引
            translateSlider(); // 移动到下一张幻灯片
          }, 0);
        } else {
          translateSlider(); // 正常移动到下一张幻灯片
        }
      }

      // 移动到指定位置
      function translateSlider() {
        const translateValue = -currentSlide * 100 + "%"; // 计算移动距离
        slider.style.transform = "translateX(" + translateValue + ")"; // 设置移动
        updateIndicators(); // 更新指示器
      }

      // 移动到指定索引的幻灯片
      function changeSlideTo(index) {
        currentSlide = index;
        translateSlider();
      }

      // 更新指示器状态
      function updateIndicators() {
        console.log("------updateIndicators------");
        indicators.forEach((indicator, index) => {
          console.log(index, currentSlide);
          if (index === currentSlide) {
            console.log("激活", currentSlide, totalSlides);
          }

          indicator.classList.toggle("selected", index === currentSlide);
        });
        //   特殊情况处理，解决：备用image的指示器无法正常更新的问题
        // 如果当前是最后一张
        if (totalSlides === currentSlide) {
          console.log(
            "特殊情况处理，解决：备用image的指示器无法正常更新的问题",
            totalSlides,
            currentSlide
          );
          indicators[0].classList.toggle("selected");
        }
      }

      // 定义自动切换的时间间隔（单位：毫秒）
      const autoSlideInterval = 2000;

      // 设置自动切换定时器
      var autoSlideTimer = setInterval(() => {
        changeSlide(1); // 切换到下一张图片
      }, autoSlideInterval);

      // 停止自动切换的定时器，当鼠标进入幻灯片区域时停止自动切换
      slidercontainer.addEventListener("mouseenter", () => {
        console.log("mouseenter-清除定时器");
        clearInterval(autoSlideTimer);
      });

      // 恢复自动切换的定时器，当鼠标离开幻灯片区域时恢复自动切换
      slidercontainer.addEventListener("mouseleave", () => {
        console.log("mouseleave-增加定时器");
        autoSlideTimer = setInterval(() => {
          changeSlide(1); // 切换到下一张图片
        }, autoSlideInterval);
      });
    </script>
  </body>
</html>

案例3：匀速播放（看实际需求）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    body,
    div,
    ul,
    li,
    p {
      padding: 0;
      margin: 0;
    }

    #div1 {
      position: relative;
      margin: 10px auto;
      border: 1px solid black;
      width: 680px;
      height: 170px;
      overflow: hidden;
    }

    #div1 ul {
      position: absolute;
      left: 0;
    }

    #div1 ul li {
      float: left;
      padding: 10px;
      list-style: none;
      width: 150px;
      height: 150px;
    }

    #div1 ul li img {
      width: 150px;
      height: 150px;
    }
    h1 {
      text-align: center;
    }
  </style>
  <body>
    <h1>通过控制iSpeed变量控制方向</h1>

    <div id="div1">
      <ul>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F12f18496-3075-4367-b599-ae390f0e0b37%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=ac9c35bc3241e3c7064bbd6ff0825f26"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F47c3b9ca-945f-4722-be80-ee68f856fc5d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=0b5c2721036e75f2003b57d10d525959"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6061840a2056a61ed620e00200725336"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc5f6153c-589f-4b46-a371-705652eeb8ec%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=7cda4ac6e5655353e36d4754983b95a1"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F600e0252-5aec-4d5f-826b-795848bba7e0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6a46723df4e4c0b70763ca11fb9392bb"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=b9ffce8d28c7e78304d93597d6211bf9"
            alt=""
          />
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      window.onload = function () {
        var oDiv = document.getElementById("div1");
        var oUl = document.getElementsByTagName("ul")[0];
        var oLi = document.getElementsByTagName("li");
        var oA = document.getElementsByTagName("a");
        var timer = null;
        var iSpeed = -1;
        //复制一遍ul
        oUl.innerHTML += oUl.innerHTML;
        //ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
        oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";

        function fnMove() {
          //图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
          if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
            //将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
            oUl.style.left = 0;
          }
          //图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
          else if (oUl.offsetLeft >= 0) {
            //将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
            oUl.style.left = -oUl.offsetWidth / 2 + "px";
          }
          //给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
          oUl.style.left = oUl.offsetLeft + iSpeed + "px";
        }
        //从左往右
        // iSpeed = -1;
        //自动滚动
        timer = setInterval(fnMove, 10);
        //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
        oDiv.onmouseover = function () {
          clearInterval(timer);
        };
        //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
        oDiv.onmouseout = function () {
          timer = setInterval(fnMove, 10);
        };
      };
    </script>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>无缝滚动_从上往下</title>
  </head>
  <style>
    body,
    div,
    ul,
    li,
    p {
      padding: 0;
      margin: 0;
    }

    #div1 {
      position: relative;
      margin: 50px auto;
      border: 1px solid black;
      width: 170px;
      height: 680px;
      overflow: hidden;
    }

    #div1 ul {
      position: absolute;
      left: 0;
    }

    #div1 ul li {
      float: left;
      padding: 10px;
      list-style: none;
      width: 150px;
      height: 150px;
    }

    #div1 ul li img {
      width: 150px;
      height: 150px;
    }
    h1 {
      text-align: center;
    }
  </style>
  <body>
    <h1>通过控制iSpeed变量控制方向</h1>
    <div id="div1">
      <ul>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F12f18496-3075-4367-b599-ae390f0e0b37%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=ac9c35bc3241e3c7064bbd6ff0825f26"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F47c3b9ca-945f-4722-be80-ee68f856fc5d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=0b5c2721036e75f2003b57d10d525959"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6061840a2056a61ed620e00200725336"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc5f6153c-589f-4b46-a371-705652eeb8ec%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=7cda4ac6e5655353e36d4754983b95a1"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F600e0252-5aec-4d5f-826b-795848bba7e0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6a46723df4e4c0b70763ca11fb9392bb"
            alt=""
          />
        </li>
        <li>
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=b9ffce8d28c7e78304d93597d6211bf9"
            alt=""
          />
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      window.onload = function () {
        var oDiv = document.getElementById("div1");
        var oUl = document.getElementsByTagName("ul")[0];
        var oLi = document.getElementsByTagName("li");
        var oA = document.getElementsByTagName("a");
        var timer = null;
        var iSpeed = -1;
        //复制一遍ul
        oUl.innerHTML += oUl.innerHTML;
        //ul的高度是所有li高度之和，复制ul之后的整个ul的高度就是li的长度乘以一个li的高度
        oUl.style.height = oLi.length * oLi[0].offsetHeight + "px";

        function fnMove() {
          //图片向上移动时的条件，即在div里的ul的offsetTop小于一个ul的高度
          if (oUl.offsetTop < -oUl.offsetHeight / 2) {
            //将整个复制的ul向下拖拽直至整个ul中的第一张图归位到起点
            oUl.style.top = 0;
          }
          //图片向下移动时的条件，即在div里的ul的offsetTop大于等于0
          else if (oUl.offsetTop >= 0) {
            //将整个复制的ul向上拖拽直至整个ul中的第一张图归位到起点
            oUl.style.top = -oUl.offsetHeight / 2 + "px";
          }
          //给ul一个速度让整个ul的offsetTop增加或减少，速度为正则向下移动，速度为负则向上移动
          oUl.style.top = oUl.offsetTop + iSpeed + "px";
        }
        //自动滚动
        timer = setInterval(fnMove, 10);
        //当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
        oDiv.onmouseover = function () {
          clearInterval(timer);
        };
        //当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
        oDiv.onmouseout = function () {
          timer = setInterval(fnMove, 10);
        };
      };
    </script>
  </body>
</html>

正在修炼的IT大佬
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html图片重叠轮播,原生js实现图片层叠轮播切换效果
weixin_36149538的博客
05-30 2374
本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下效果图：功能描述：自定义图片尺寸；每隔一段时间自动滚动图片；每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；鼠标移上图片，显示当前图片的详细信息；点击按钮向前向后滚动；详细代码:html代码:*{margin:0px; padding:0px;font-family:"Microsoft YaHei...
js图片轮播（翻页切换）
ICY___的博客
01-22 3347
前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡出是比较难的，但只要用心，仔细的体会核心思想，一步步来，相信还是可以很好地掌握的！ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;!-- 主要思想 结合无缝轮播，使得...
JS 轮播图 图片切换（定时器）
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
html图片圆点切换,图片轮播带小圆点选择左右切换
weixin_30579759的博客
05-30 2279
< >css代码*{margin: 0px;padding: 0px;}.banner{width: 790px;height: 340px;background-color: #fed93a;ma...
简单的HTML网页图片轮播自动切换
热门推荐
qq_51727668的博客
10-10 6万+
简单的HTML网页图片轮播切换[代码注释详解]效果展示1.必须的html元素2.css代码3.JavaScript代码4.思路总结觉得有帮助点个赞吧 效果展示 具体解释请参考代码中的注释! 总共展示5张图片，图片中间下方5个点的代表展示顺序。（如图可知播放到第二张图片） 图片左右两边的箭头上一张和下一张！ 1.必须的html元素 <!doctype html> <html> <head> <meta charset="utf-8"> <title&gt
html图片轮播加上切换按钮,轮播图（点击按钮切换）
weixin_42353053的博客
06-04 4675
结构部分： 上一张下一张样式部分：*{margin: 0;padding: 0;}#container{width: 450px;margin:50px auto;padding: 20px;text-align: center;background-color: antiquewhite;}img{width: 450px;height: 200px;}.btn button{ba...
android实现图片自动轮播代码,Android实现图片轮播切换实例代码
weixin_29913191的博客
05-26 2075
利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换，其中当点击“上一张”图片时，切换到上一张图片；当点击“下一张”图片时，切换到下一张图片。其效果图如下： 设置布局文件，其内容如下：activity_image_flipper_shade.xml动画效果配置文件，其内容如下：A.push_left_in.xml(从左边进入屏幕)B.push_lef...
css33d图片轮播_通过html+css3实现图片轮播切换
weixin_39982236的博客
12-22 534
摘要：图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。 图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。html代码：html...
unity实现图片轮播效果_Unity 制作图片轮播功能
weixin_34769715的博客
02-22 2913
功能：自动播放移动 首尾相接 鼠标移到图片上 时 移动停止并 该图片变大 鼠标离开图片恢复原形 轮播效果继续效果如下 界面布局 大体是这个样子scrollView就是一个底板带Image组件Viewport负责遮罩带Mask组件然后content前期布局使用了Group组件 不过项目需求图片尺寸要变化 所以之后关闭子类Image是一张张图片 初版轮播 上代码using UnityEngine;...
带数字的图片切换+轮播
眉目成书
03-07 2434
带数字的图片切换+轮播 亲测
jQuery图片轮播切换
07-24
**jQuery图片轮播切换**是一种常见的网页动态效果，常用于展示多张图片，如相册封面、产品展示或广告轮播。它利用JavaScript库jQuery的强大功能，为用户提供平滑、响应式的图片切换体验。在本篇文章中，我们将深入...
原生js图片轮播切换代码
06-24
本项目名为“原生js图片轮播切换代码”，它利用JavaScript的原生功能来实现图片的自动轮播以及通过标题和索引按钮进行手动控制。下面将详细介绍这个项目中的关键知识点。 1. **原生JavaScript**： - 原生...
图片轮播素材 左右按钮切换 图片叠加
11-12
在网页设计和开发中，图片轮播是一种常见的交互元素，用于展示一组图片或内容，而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点，包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...
jQuery手风琴图片轮播切换
04-07
**jQuery手风琴图片轮播切换详解** 在网页设计中，动态效果的运用可以极大地提升用户体验，其中jQuery手风琴图片轮播切换是一种常见的交互设计元素。这种效果结合了手风琴折叠展示与图片轮播的功能，使得内容展示既...
Html5前端基本知识整理与回顾下篇
m0_75262255的博客
07-10 944
Html5前端基本知识整理与回顾下篇
html5——列表、表格
jiuyuexixi的博客
07-10 484
html5——列表、表格
html5——表单
最新发布
jiuyuexixi的博客
07-10 666
html5——表单
ES6 新特性有哪些
weixin_64684095的博客
07-06 995
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 836
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
unity图片轮播点击切换图片
07-25
最后，可以添加其他功能，如自动轮播、切换动画效果等，以增强图片轮播的交互体验。 这样，通过以上步骤就可以在Unity中实现一个简单的图片轮播点击切换的功能。希望对您有所帮助！ ### 回答3： 在Unity中实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正在修炼的IT大佬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值