轮播图-位移-透明度-旋转_集translate,scale, roate的轮播图-CSDN博客

本文链接：https://blog.csdn.net/qq_36405210/article/details/139802944

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="container">
        <div class="slideImg">
            <div class="imgItem">
                <img src="./images/1.jpg" alt="">
            </div>
            <div class="imgItem">
                <img src="./images/2.jpg" alt="">
            </div>
            <div class="imgItem">
                <img src="./images/3.jpg" alt="">
            </div>
            <div class="imgItem">
                <img src="./images/4.jpg" alt="">
            </div>
            <div class="imgItem">
                <img src="./images/5.jpg" alt="">
            </div>
            <div class="imgItem">
                <img src="./images/6.jpg" alt="">
            </div>
            <div class="imgItem">
                <img src="./images/7.jpg" alt="">
            </div>
        </div>
        <div id="toLeft"></div>
        <div id="toRight"></div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

#container{
    width: 100%;
    position: relative;
}
#container .slideImg{
    width: 50%;
    position: relative;
    margin: 0 auto;
}
#container .imgItem{
    width: 100%;
    position: absolute;
    transition: all .3s ease;
}
#container .imgItem img{
    width: 100%;
}

/* 左侧按钮 */
#container #toLeft::after{
    content: '';
    width: 50px;
    height: 50px;
    display: block;
    border-left:  5px solid rgb(141, 91, 91);
    border-top:   5px solid rgb(141, 91, 91);
    transform: rotate(-45deg);
}
#container #toLeft{
    padding: 20px;
    padding-right: 5px;
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    z-index: 99;
}

/* 左侧按钮 */
#container #toRight::after{
    content: '';
    width: 50px;
    height: 50px;
    display: block;
    border-left:  5px solid rgb(141, 91, 91);
    border-top:  5px solid rgb(141, 91, 91);
    transform: rotate(135deg);
}
#container #toRight{
    padding: 20px;
    padding-left: 5px;
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 99;
}

#container #toRight:hover,#container #toLeft:hover{
    /* 蒙层： */
    background: rgba(0, 0, 0, 0.5);
}

JS

let container = document.querySelector('#container');
let slideImg = document.querySelector('.slideImg');
let imgItem = document.querySelectorAll('.imgItem');
let toLeft = document.querySelector('#toLeft');
let toRight = document.querySelector('#toRight');
// 图片添加前数量
let imgItemCount = imgItem.length;
// 当前图片的索引
let curindex = 3 + imgItemCount;
// 添加头尾之后的图片
let imgItemNew = null;

// 开头、结尾添加图片
function createItemImg(){
    // 追加一组图片
    for(let i = 0; i < imgItem.length; i++){
        let clone = imgItem[i].cloneNode(true);
        slideImg.appendChild(clone);
    }
    // 前面追加一组图片
    for(let i = imgItem.length-1 ; i > 0; i--){
        let clone = imgItem[i].cloneNode(true);
        slideImg.insertBefore(clone,slideImg.firstChild);
    }
}

function init(){
    // 设置容器的高度
    container.style.height = imgItem[0].offsetHeight+'px';
    // 追加图片
    createItemImg();
    //初次渲染
    yaout();
}
init();

// 渲染
function yaout(isAnimation=true){

    // 获取新的图片
    imgItemNew = document.querySelectorAll('.imgItem');
    // 图片之间的距离
    let space = 200;
    // 缩放值
    let zoom = 0.8;
    // 透明值
    let opacity = 0.8;
    for(let i = 0; i < imgItemNew.length; i++){
        // 设置动画
        imgItemNew[i].style.transition = isAnimation ? 'all .5s ease' : 'none';

        let interval = Math.abs(i - curindex);
        let dis = Math.sign(i - curindex);
        // 设置偏移值
        let translateX = (i - curindex) * space;
        if(curindex !== i){
            translateX += 100 * dis;
        }
        // 设置缩放值
        let scale =  zoom ** interval;
        // 设置旋转值
        let rotate = i === curindex ? 0 : 30 * dis;
        imgItemNew[i].style.transform = `translateX(${translateX}px) scale(${scale}) rotateY(${rotate}deg)`;
        
        // 设置z-index
        imgItemNew[i].style.zIndex = imgItemNew.length - interval;

        // 设置透明度
        imgItemNew[i].style.opacity = opacity ** interval;
    }
}

// 图片事件
imgItemNew.forEach((item, index) => {
    item.addEventListener('click', function(){
        curindex = index;
        yaout();
        toCurindex();
    })
})

toLeft.addEventListener('click', function(){
    curindex--;
    yaout();
    if((curindex - imgItemCount)< 0){
        toCurindex();
    }
    
})

toRight.addEventListener('click', function(){
    curindex++;
    yaout();
    if(curindex - imgItemCount > imgItem.length - 1){
        toCurindex();
    }
})

// 瞬间回到对应的位置
function toCurindex(){
    setTimeout(() => {
        curindex = curindex%imgItemCount +　imgItemCount;
        yaout(false);
    }, 500);
}