js轮播图无缝

_最初の心

已于 2023-03-03 13:15:08 修改

阅读量152

点赞数

分类专栏： web前端文章标签： html css javascript Powered by 金山文档

于 2023-03-02 20:41:58 首次发布

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

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>轮播图</title>
</head>
<body>
        <div class="container">
                <!-- 图片列表 -->
                <div class="rotation">
                    <div class="img_item">
                        <a href=""><img src="./1.jpg" alt=""></a>
                    </div>
                    <div class="img_item">
                        <a href=""><img src="./2.jpg" alt=""></a>
                    </div>
                    <div class="img_item">
                        <a href=""><img src="./3.jpg" alt=""></a>
                    </div>
                </div>
                <!-- 焦点 -->
                <div class="indicator">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                </div>
                <!-- 左右箭头 -->
                <div class="arrow arrow_left"></div>
                <div class="arrow arrow_right"></div>
        </div>

    <script src="./index.js"></script>
</body>
</html>

css代码

*{
    padding: 0;
    margin: 0;
}
.container{
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden
}
.container .rotation{
    width: 100%;
    height: 100%;
    display: flex;
} 

.arrow_left{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(0,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.arrow_left:hover{
    background-color: rgb(0,0,0,0.5);
}

.arrow_left::after{
    content: '';
    width: 20px;
    height:20px;
    border-left:3px solid white;
    border-bottom:3px solid white;
    transform: translateX(25%) rotate(45deg) ;
}

.arrow_right{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.arrow_right:hover{
    background-color: rgb(0,0,0,0.5);
}

.arrow_right::after{
    content: '';
    width: 20px;
    height:20px;
    border-left:3px solid white;
    border-bottom:3px solid white;
    transform: translateX(-25%) rotate(222deg);
}

/* 焦点 */

.indicator{
    width: 15%;
    position: absolute;
    bottom: 5%;
    display: flex;
    justify-content: space-around;
    left: 0;
    right: 0;
    margin:0 auto;
}

.indicator>span{
    font-size: 0;
    border: 1px solid aliceblue;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}

.indicator .active{
     background-color: aliceblue;
}

js代码

// 轮播图所需元素
let doms = {
    rotation:document.querySelector('.rotation'),
    arrow_left:document.querySelector('.arrow_left'),
    arrow_right:document.querySelector('.arrow_right'),
    indicator:document.querySelectorAll('.indicator span'),
    container:document.querySelector('.container'),
};
//图片数量
let count = doms.rotation.children.length;

//轮播函数
let indexs = 0; //记录第几张
function moveTo(index){
    //滑动到指定位置
    doms.rotation.style.transform = `translateX(-${index}00%)`;
    // 动画效果
    doms.rotation.style.transition = '0.5s';
    indexs = index;
    //处理焦点
    let active = document.querySelector('.indicator .active');
    active.classList.remove('active');

    doms.indicator[index].classList.add('active');
}

//左侧滑动
function left_next(){
    if(indexs === 0){
        console.log(doms.count);
        doms.rotation.style.transform = `translateX(-${count}00%)`;
        doms.rotation.style.transition = 'none';
        //强制渲染
        doms.rotation.clientHeight;
        //回到最后一张
        moveTo(count - 1);
    }else{
        moveTo(indexs - 1);
    }
}
//右侧滑动
function right_next(){
    if(indexs === count-1){
        doms.rotation.style.transform = 'translateX(100%)';
        doms.rotation.style.transition = 'none';
        //强制渲染
        doms.rotation.clientHeight;
        //回到第一张
        moveTo(0);
    }else{
        moveTo(indexs + 1);
    }
}

// 焦点切换
doms.indicator.forEach(function(item,index){
    item.onclick = function(){
        moveTo(index);       
    }
});

//自动播放
let voluntarily = '';// 记时器
function voluntarilyPay(){
    voluntarily = setInterval(function(){
        if(indexs === count-1){
            doms.rotation.style.transform = 'translateX(100%)';
            doms.rotation.style.transition = 'none';
            //强制渲染
            doms.rotation.clientHeight;
            //回到第一张
            moveTo(0);
        }else{
            moveTo(indexs + 1);
        }
    },2000);
}

// 鼠标移入停止 移出开始 
doms.container.onmouseover = function(){
    clearInterval(voluntarily);
}
 doms.container.onmouseout = function(){
     voluntarilyPay();
 }


// 初始化
function init(){
    // 复制第一张图片
    let first = doms.rotation.firstElementChild.cloneNode(true);
    //复制最后一张图片
    let last = doms.rotation.lastElementChild.cloneNode(true);
    // 把第一张放到最后
    doms.rotation.appendChild(first);
    //把最后一张放到第一张
    doms.rotation.insertBefore(last,doms.rotation.firstElementChild);

    //最后一张调整位置
    last.style.position = 'absolute';
    last.style.transform = 'translateX(-100%)';

    //自动播放
    voluntarilyPay();
}
//初始化
init();



// 箭头点击事件
doms.arrow_left.onclick = left_next;
doms.arrow_right.onclick = right_next;