一个有意思的轮播图

效果展示

废话不多说，看下html结构

HTML结构

<div class="banner">
    <div class="banner_tab">
        <div class="small_img">
            <div class="a">
                <img src="./images/1.png" alt="">
            </div>
            <div class="a">
                <img src="./images/2.png" alt="">
            </div>
            <div class="a">
                <img src="./images/3.png" alt="">
            </div>
            <div class="a">
                <img src="./images/4.png" alt="">
            </div>
            <div class="a">
                <img src="./images/5.png" alt="">
            </div>
        </div>
    </div>
    <div class="big_img">
        <img src="./images/1.png" alt="">
    </div>
</div>

类名small_img就是左边的小图，类名a就是每一项

类名big_img是右边展示的大图

css结构

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #a0cfff;
}
.banner{
    width: 900px;
    height: 400px;
    background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
    display: flex;
    /*设置居中*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.banner .banner_tab{
    width: 200px;
    margin-right: 10px;
}
.small_img{
    margin-right: 10px;
}
.banner .small_img .a{
    width: 200px;
    height: 70px;
    margin-bottom: 10px;
    transition: all 1.5s;
}
/*hover的时候小图向右移动200px，并且隐藏*/
.banner .banner_tab .small_img .a:hover{
    transform: translateX(200px);
    opacity: 0;
}
.banner .small_img>div>img{
    width: 100%;
    height: 100%;
}
.banner .big_img{
    width: 100%;
    height: 100%;
}
.banner .big_img>img{
    width: 100%;
    height: 100%;
}
/*这里放着，到时候动态添加类名*/
.animation{
    transform: translateX(200px);
    opacity: 0;
}

js部分

// 获取所有类名为a的小图div。
let divTime = document.querySelectorAll('.a')

// 获取大图的img标签
let bigImg = document.querySelector('.big_img>img')
let index = 0let timer;

// 移除所有其他的类名
function removeClass(){
    for (let i = 0;i < divTime.length;i++){
        divTime[i].className = 'a'
    }
}
// 动态添加类名
function addClass(index){
    // 添加前保证兄弟元素没有其他的类名
    removeClass()
    // 给第index个元素添加类名
    divTime[index].className += ' animation'
    bigImg.src = `./images/${index+1}.png`
}
// 设置一个定时器函数
function ts(){
    timer = setInterval(()=>{
        // 轮流给每个小图div添加animation的类名
        addClass(index)
        index++
        // 因为index初始值为0，图片总共就5张，所以在5的时候给他恢复初始值
        if (index === 5){
            index = 0
        }
    },1500)}
// 给每个小图片添加一个移入移出的方法
for (let i = 0;i < divTime.length;i++){
    // 移入方法
    divTime[i].onmouseover = ()=>{
        removeClass()
        bigImg.src = `./images/${i+1}.png`
        // 移入时关闭定时器
        clearInterval(timer)
        index = i
    }
    // 移出方法
    divTime[i].onmouseout = ()=>{
        // 移出时开启定时器
        ts()
    }
}
// 进入页面时就开启定时器
ts()

这就完成了。