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

news2024/12/23 23:23:03

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

效果一

循环播放，单一的效果
请添加图片描述

代码实现

<!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>

效果二

可以控制是否轮播播放
请添加图片描述

<!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>
···