(一)原生js案例之图片轮播

原生js实现的两种播放效果

效果一

循环播放,单一的效果

代码实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片切换</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #content{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
      background-color: aliceblue;
  }
    #content a{
      width: 40px;
      height: 40px;
      background-color: #000;
      border: 5px solid #fff;
      position: absolute;
      top: 175px;
      text-decoration: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
    }
    #content a:hover{
      filter: opacity(100);
      opacity: 1;
    }
    #prev{left: 10px;}
    #next{ right: 10px;}
    #desc,#num{
      position: absolute;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      background-color: #000;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
      padding: 0 10px;
    }
    #desc{bottom: 0;}
    #img{width: 400px;height: 400px;}
    #num{filter: opacity(.9);
      opacity: 90;
      text-align: center;
    }
  </style>
  <script>
    window.onload = function () {
      const oPrev = document.getElementById('prev');
      const oNext = document.getElementById('next');
      const oImg = document.getElementsByTagName('img')[0];
      const oDesc = document.getElementById('desc');
      const oNum = document.getElementById('num');
      const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];
      const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]
      let num = 0;

      
      tabChange()

      oPrev.addEventListener('click', function(){
        num--
        if(num < 0){
          num = oImgs.length-1;
        }
        tabChange()

      })

      oNext.addEventListener('click', function(){
        num++
        if(num == oImgs.length){
          num = 0;
        }
        tabChange()
      })
      function tabChange(){
        //计算图片数量
        oNum.innerHTML = num+1 + "/" + oImgs.length;
        oImg.src = oImgs[num];
        oDesc.innerHTML = oText[num];
      }


    }
  </script>
</head>
<body>
  <div id="content">
    <a id="prev" href="javascript:;"><</a>
    <img id="img" alt="">
    <p id="desc">图片文字加载中...</p>
    <span id="num">正在计算中...</span>
    <a id="next" href="javascript:;">></a>
  </div>
</body>
</html>

效果二

可以控制是否轮播播放

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片切换</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #content{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
      background-color: aliceblue;
  }
    #content a{
      width: 40px;
      height: 40px;
      background-color: #000;
      border: 5px solid #fff;
      position: absolute;
      top: 175px;
      text-decoration: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
    }
    #content a:hover{
      filter: opacity(100);
      opacity: 1;
    }
    #prev{left: 10px;}
    #next{ right: 10px;}
    #desc,#num{
      position: absolute;
      left: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      background-color: #000;
      color: #fff;
      filter: opacity(50);
      opacity: 0.5;
      padding: 0 10px;
    }
    #desc{bottom: 0;}
    #img{width: 400px;height: 400px;}
    #num{filter: opacity(.9);
      opacity: 90;
      text-align: center;
    }
    .tool{
      text-align: center;
    }
  </style>
  <script>
    window.onload = function () {
      const oPrev = document.getElementById('prev');
      const oNext = document.getElementById('next');
      const oImg = document.getElementsByTagName('img')[0];
      const oDesc = document.getElementById('desc');
      const oNum = document.getElementById('num');
      const oLoop = document.getElementById('loop');
      const oStop = document.getElementById('stop');
      const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];
      const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]
      let num = 0;
      let isLoop = true;


      oLoop.addEventListener('click', function(){
        isLoop = true;
      })

      oStop.addEventListener('click', function(){
        isLoop = false;
      })


      
      tabChange()

      oPrev.addEventListener('click', function(){
        num--
        if(num < 0){
          if(isLoop){
            num = oImgs.length-1;
          }else{
            alert("没有上一页了")
            num = 0;
            return false;
          }
        }
        tabChange()

      })

      oNext.addEventListener('click', function(){
        num++
        if(num == oImgs.length){
          if(isLoop){
            num = 0;
          }else{
            alert("没有下一页了")
            num = oImgs.length-1;
            return false;
          }
        }
        tabChange()
      })
      function tabChange(){
        //计算图片数量
        oNum.innerHTML = num+1 + "/" + oImgs.length;
        oImg.src = oImgs[num];
        oDesc.innerHTML = oText[num];
      }


    }
  </script>
</head>
<body>
  <div class="tool">
    <h1>图片切换</h1>
    <button id="loop">循环切换</button>
    <button id="stop">停止循环切换</button>
  </div>
  <div id="content">
    <a id="prev" href="javascript:;"><</a>
    <img id="img" alt="">
    <p id="desc">图片文字加载中...</p>
    <span id="num">正在计算中...</span>
    <a id="next" href="javascript:;">></a>
  </div>
</body>
</html>
···
相关推荐
Mintopia7 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙7 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院10 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记12 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92113 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada14 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia14 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj15 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人20 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼21 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试