图片切换、案例

茶卡丶小雨

已于 2022-06-12 20:27:25 修改

阅读量91

点赞数

分类专栏： js、笔记案例实现文章标签： javascript css html

于 2022-06-12 18:28:37 首次发布

本文链接：https://blog.csdn.net/qq_67674653/article/details/125248084

版权

js、笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

案例实现

7 篇文章 0 订阅

订阅专栏

1. 简单的HTML：

<body>

    <div class="sample">
        <div class="imgs">
            <img src="./img/1 (1).jpg" alt="01">
        </div>

        <ul class="list">
            <li class="one">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

2. 简单的CSS：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .sample{
            width: 800px;
            height: 400px;
            /* border: 1px solid aqua; */
            margin: 100px auto;
            position: relative;
        }
        .sample .imgs{
            width: 100%;
        }
        .sample .imgs img{
            width: 100%;
            height: 350px;
        }
        .sample .list{
            width: 100%;
            height: 50px;
            /* border: 1px solid yellow; */
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            background: rgba(0,0,0,.4);
        }
        .sample .list li{
            flex: 1;
            text-align: center;
            line-height: 50px;
            color: #ffffff;
            cursor: pointer;
        }
        .sample .list .one{
            background: aqua;
        }
    </style>

3. 简单的JavaScript：

<script>

    1. 获取对像

    let imgs = document.querySelector('.imgs img');
    let item = document.querySelectorAll('.list li');
    
    let imgsArr = ['./img/1 (1).jpg',
                    './img/1 (2).jpg',
                    './img/1 (3).jpg',
                    './img/1 (4).jpg',
                    './img/1 (5).jpg',
    ];

   2. 利用循环注册点击事件实现下一步

    for(let i = 0;i<item.length;i++){

        item[i].onclick = function(){
            // console.log(i);

            for(let j = 0;j<item.length;j++){

                item[j].classList.remove('one');

            }

                // 点击 li后 添加noe的样式
            this.classList.add('one');
                   // 获取img数组
            imgs.setAttribute('src',imgsArr[i]);

        }
    }

</script>

学习路上的笔记；

案例二：（仿制品 ↓↓↓↓ ）

1. 简单的HTML：

    <div id="wrap">
      <!-- 图片列表 -->
      <div class="img-list">
        <img src="https://s1.ax1x.com/2020/09/26/0irm1P.jpg" />
        <img src="https://s1.ax1x.com/2020/09/26/0irQ0g.jpg" />
        <img src="https://s1.ax1x.com/2020/09/26/0ir8ts.jpg" />
        <img src="https://s1.ax1x.com/2020/10/11/0gbKoV.jpg" />
        <img src="https://s1.ax1x.com/2020/10/11/0gb7Os.jpg" />
      </div>

      <!-- 小箭头 -->
      <div class="arrow">
        <a href="javascript:;" class="left"><</a>
        <a href="javascript:;" class="right">></a>
      </div>

      <!-- 小圆点 -->
      <ul class="circle-list">
        <li class="circle active" data-n="0"></li>
        <li class="circle" data-n="1"></li>
        <li class="circle" data-n="2"></li>
        <li class="circle" data-n="3"></li>
        <li class="circle" data-n="4"></li>
      </ul>
    </div>

2. 简单的CSS：

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }

      #wrap {
        overflow: hidden;
        position: relative;
        width: 1031px;
        height: 580px;
        margin: 200px auto 0;
      }

      #wrap .img-list {
        display: flex;
        position: relative;
        left: 0px;
        width: 100%;
        height: 100%;
        transition: 0.5s ease;
      }

      #wrap .img-list img {
        width: 100%;
        cursor: pointer;
      }

      #wrap a {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        display: block;
        width: 40px;
        height: 70px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        user-select: none;
        font-size: 30px;
        text-align: center;
        line-height: 70px;
        text-decoration: none;
      }

      #wrap a.left {
        left: 0;
      }

      #wrap a.right {
        right: 0;
      }

      .circle-list {
        display: flex;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 240px;
        height: 40px;
        z-index: 8;
      }
      .circle-list > .circle {
        margin: 0 5px;
        width: 30px;
        height: 30px;
        background-color: #ecf0f1;
        border-radius: 50%;
      }

      .circle-list > .circle.active {
        background-color: #e74c3c;
      }
    </style>

3. 简单的JavaScript：

    <script>
      // 获取左右按钮和图片列表
      let oLeft = document.querySelector(".left");
      let oRight = document.querySelector(".right");
      let oImgList = document.querySelector(".img-list");

      // 克隆第一张图片
      let clonefirstImg = oImgList.firstElementChild.cloneNode();
      // 将第一张图片添加至图片列表的末尾
      oImgList.appendChild(clonefirstImg);

      // 图片索引 代表当前是第几张图片  index:0代表第一张图片
      let index = 0;

      // 设置函数节流锁
      let lock = true;
      function handleRightBtn() {
        if (!lock) return;
        index++;
        oImgList.style.left = index * -1031 + "px";
        // 为什么要加过渡? 因为切换到了最后一张假图时会将过渡去掉
        oImgList.style.transition = "0.5s ease";

        if (index === 5) {
          index = 0;
          setTimeout(() => {
            oImgList.style.left = 0;
            // 取消过渡 500毫秒之后切换第一张
            oImgList.style.transition = "none";
          }, 500);
        }

        // 设置小圆点的高亮
        setCircles();
        // 关锁
        lock = false;
        setTimeout(() => {
          lock = true;
        }, 500);
      }

      // 右按钮的实现
      oRight.addEventListener("click", handleRightBtn);

      // 左按钮的实现  瞬间切换到假图然后拉到真实最后一张图片
      oLeft.addEventListener("click", () => {
        if (!lock) return;
        index--;
        if (index === -1) {
          oImgList.style.left = 5 * -1031 + "px";
          oImgList.style.transition = "none";
          index = 4;
          setTimeout(() => {
            oImgList.style.left = index * -1031 + "px";
            oImgList.style.transition = "0.5s ease";
          }, 0);
        } else {
          oImgList.style.left = index * -1031 + "px";
        }

        // 设置小圆点的高亮
        setCircles();

        lock = false;
        setTimeout(() => {
          lock = true;
        }, 500);
      });

      // 获取五个小圆点
      const circles = document.querySelectorAll(".circle");

      // 小圆点高亮的显示
      function setCircles() {
        for (let i = 0; i < circles.length; i++) {
          if (i === index) {
            circles[i].classList.add("active");
          } else {
            circles[i].classList.remove("active");
          }
        }
      }

      // 小圆点点击切换图片 使用事件代理
      const oCircle = document.querySelector(".circle-list");
      oCircle.addEventListener("click", (e) => {
        // 当我点击小圆点的时候
        if (e.target.nodeName.toLowerCase() === "li") {
          // 当前元素的data-n对应得值 和index一一对应
          const n = Number(e.target.getAttribute("data-n"));
          index = n;
          setCircles();
          oImgList.style.transition = "0.5s ease";
          oImgList.style.left = index * -1031 + "px";
        }
      });

      // 自动轮播
      let autoplay = setInterval(handleRightBtn, 2000);
      const oWrap = document.getElementById("wrap");
      // 移入停止轮播
      oWrap.addEventListener("mouseenter", () => {
        clearInterval(autoplay);
      });
      // 移出继续轮播
      oWrap.addEventListener("mouseleave", () => {
        // 设表先关
        clearInterval(autoplay);
        autoplay = setInterval(handleRightBtn, 2000);
      });

      // https://segmentfault.com/a/1190000018445196
    </script>

案例三图片显示隐藏：

1. HTML：

<body>
    <button class="btu">切换</button>
    <img class="imgs" width="300" src="./img/1 (3).jpg" alt="03">
</body>

2. CSS:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button,img{ 
            display: block;
            margin-bottom: 30px;
            margin-left: 50px;
        }
    </style>

3. javascript：

<script>

    // 获取
    let btu = document.querySelector('.btu');
    let imgs = document.querySelector('.imgs');

    let isFlag = true;  
    // 随便定义一个变量，给点击事件做准备状态

    btu.onclick = function(){  // 点击事件
        //判断点击后这个状态的样子
        if(isFlag){
            // 点击一次后隐藏
            imgs.style.display = 'none'; //执行后想要的效果
            isFlag = false;  // 状态
        }else{   
            // 再点击的话就显示
            imgs.style.display = 'block';//执行后想要的效果
            isFlag = true;  // 状态
        }
    }
</script>