前端技术-(图片切换)

图片切换

       前言：图片切换是前端页面十分常见的技术，主要是应用在首页的数据展示，并且会具有很多不同的切换的切换效果十分的炫酷。市面上也有很多框架封装了很多的图片切换的方法。本篇文章只能实现的图片切换效果，炫酷效果还未实现。虽然有很多的已经封装好的效果提供使用，但是理解最基础的原理的还是一些必要。

        1、实现原理

                图片切换最核心的原理，就是图片的将图片放在数组里面，操作图片数组的下标。来实现效果

        准备：

                css样式

* {
    margin: 0;
    padding: 0;
}

.ShowImg {
    width: 800px;
    height: 500px;
    margin: auto;
    /* border: 1px solid darkblue; */
    margin-top: 20px;
    position: relative;
}

.ShowImg img {
    width: 100%;
    height: 100%;
    transition: all 1s ease-in;
}

ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

ul,
li {
    list-style: none;
}

.ShowImg ul {
    width: 200px;
    /* border:1px solid darkblue; */
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -50px;

}

.ShowImg ul li {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    transition: all .5s;
}

.left {
    width: 50px;
    height: 50px;
    font-size: 30px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 0;
    color: white;
    background-color: rgba(6, 233, 249, 0.4);
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    z-index: 99;
}

.right {
    width: 50px;
    height: 50px;
    font-size: 30px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    right: 0px;
    color: white;
    background-color: rgba(6, 233, 249, 0.4);
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    z-index: 99;
}

.bom {
    width: 800px;
    height: 80px;
    border: 1px solid red;
    margin: 10px auto;
}

span::selection {
    background-color: transparent;
}

.active {
    width: 20px !important;
    height: 20px !important;
    background-color: aqua !important;
}
span:hover{
    cursor: pointer;
}

HTML结构

 <div class="ShowImg">
        <img src="./img/2.webp">
        <ul>
          
        </ul>
        <!-- 左右按钮 -->
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </div>

搭建简单的页面

         JS代码

             提示：一般情况下的在图片上会有小圆点，提供点击来实现图片之间的切换。这里采用根据图片数组长度自动生成的方法来渲染点击的小圆点。

         第一步：根据图片数组长度来创建并渲染小圆点

 // 获取到需要渲染小圆点的节点
        let ul = $('ul',0);
        // 根据图片数组长度来创建圆点
        imgArr.forEach((item)=>{
            // 创建节点
            let li = document.createElement('li');
            // 插入到节点
            ul.appendChild(li)
        })

        页面效果

        第二步：

                点击切换按钮，可以切换图片。这里实现的原理，设置一个index作为图片的下标，点击下一张的时候将index++，就可以实现图片的切换。当切换到最后一张的时候，就需要对index进行判断，将index重新赋值为0

上代码

        // 设置index作为下标
        let index = 0;
        // 下一张
        let nextImg = $('.right', 0);
        // 上一张
        let prevImg = $('.left',0)
        // 获取显示图片节点
        let ShowImg = $('.ShowImg img')
        //绑定监听事件
        nextImg.addEventListener('click', next);
        prevImg.addEventListener('click', prev)
        // 下一张
       function next() {
            // 下标++改变图片
            index++;
            // 判断是否切换到最后一张
            if (index >= imgArr.length) {
                // 重新赋值到第一张
                index = 0;
            }
            // 切换图片
            ShowImg.src = imgArr[index];
            // 注意：这里给小圆点绑定样式的时候，需要将其他未选中的小圆点样式祛除(排他思想)
            // 在添加样式之前，清除其他圆点的样式
            pai()
            // 给圆点添加样式
            liAll[index].className = 'active'
        }
        // 上一张
        function prev() {
            // 注意：这里需要先进行判断再赋值。因为页面打开index--，就会找不到图片下标
            if (index <= 0) {
                index = imgArr.length;
            }
            // 同向后且逻辑一样
            index--;
            // 切换图片
            // 同理
            pai();
            // 给圆点添加样式
            liAll[index].className = 'active'
            ShowImg.src = imgArr[index];
        }

效果展示：

左右切换效果

        第三步：实现小圆点的切换

                逻辑：当点击按钮的时候，下面的小图片也需要切换。可以绑定样式，确定当前的图片

看代码：

        先封装一个排他函数，将不是当前选中图片对应的小圆点样式去除(上图代码已修改)

// 封装一个排他函数
        function pai() {
            liAll.forEach(item => {
                item.className = ''
            })
        }

    这样最基础的图片切换效果就完成了

基本效果

        第四步：设置定时器让图片自己动起来(同时设置移入移出，停止或开启定时器)，鼠标划入左右切换按钮的时候，也需要停止计时器

    let timer = null;
        timer = setInterval(() => {
            next()
        }, 1000);
        // 鼠标移入图片，小圆点的时候停止轮播
        liAll.forEach((item) => {
            item.addEventListener('mouseover', () => {
                // 清除定时器
                clearInterval(timer)
            })
        });
        img.addEventListener('mouseover', () => {
            // 清除定时器
            clearInterval(timer)
        });
        // 移开的时候重新开启定时器
        liAll.forEach((item) => {
            item.addEventListener('mouseout', () => {
                // 清除定时器(注意在开启定时器之前，需要重新清除定时器)
                clearInterval(timer);
                timer = setInterval(() => {
                    next()
                }, 1000);
            })
        });
        // 图片移开重新开启定时器
        img.addEventListener('mouseout', () => {
            clearInterval(timer);
            timer = setInterval(() => {
                next()
            }, 1000);
        });
        // 鼠标划入左右切换按钮，也需要停止定时器
        spanAll.forEach((item)=>{
            item.addEventListener('mouseover',()=>{
                clearInterval(timer)
            })
        });
        // 滑出开启
        spanAll.forEach((item)=>{
            item.addEventListener('mouseout',()=>{
                clearInterval(timer);
                timer = setInterval(() => {
                    next()
                }, 1000);
            })
        });

        效果展示：

停止图片轮播

        最后一步：

                实现导航按钮的切换图片

  // 绑定事件
        liAll.forEach((item,i) =>{
            item.addEventListener('click',()=>{
                // 将图片改变成li对应的图片
                index = i;
                ShowImg.src = imgArr[index];
                pai();
                item.className = 'active';
            })
        })

        效果显示:

最终效果

         此文章实现的简单的图片切换效果。仅供参考，有更好的意见建议欢迎提出。其次有代码或逻辑不正确的，不好理解的也可以提出。