纯原生JS打造轮播图？

最新推荐文章于 2023-12-04 20:00:00 发布

Try Tomato

最新推荐文章于 2023-12-04 20:00:00 发布

阅读量304

点赞数 1

分类专栏： # + 浏览器 DOM 文章标签： javascript 轮播图 UI

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124266463

版权

+ 浏览器 DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

第一步:自己封装一个轮播图动画（缓动动画）

第二步：构建HTMLUI页面

第三步：Less书写（CSS）

第四步：JS书写与调用

第一步:自己封装一个轮播图动画（缓动动画）

//Obj     对象
//targetleft    移动距离
//callback      回调函数
function getAnimal(obj,target,callback){
    clearInterval(obj.timer)
    obj.timer = setInterval( ()=> {
        let step =(target - obj.offsetLeft) / 10; 
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if (obj.offsetLeft == target){
            clearInterval(obj.timer)
            callback && callback()
        }
            obj.style.left = obj.offsetLeft + step + 'px'
    }, 30)
}

第二步：构建HTMLUI页面

<!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">
    <title>网页轮播图</title>
    <link rel="stylesheet" href="./icomoon/style.css">
    <link rel="stylesheet" href="./index.css">
    <!-- 动画脚本一定要放在index的上面先执行 -->
    <script src="./anim.js"></script>
    <script src="./index.js"></script>
</head>
<body>
    <div class="max-box">
        <!-- 左右按钮 -->
        <a href="javascript:;" class="icomoon icon-circle-left"></a>
        <a href="javascript:;" class="icomoon icon-circle-right"></a>
        <!-- 轮播图 -->
        <ul>
            <li><a href="#"><img src="./images/HZ3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/HZ30.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/HZ44.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/HZ81.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/HZe184.jpg" alt=""></a></li>
        </ul>
        <!-- 小圆圈 -->
        <ol></ol>
    </div>
</body>
</html>

第三步：Less书写（CSS）

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.max-box{
    position: relative;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%,-50%);
    width: 100vh;
    height: 60vh;
    // background-color: aqua;
    border: 1px solid #666;
    overflow: hidden;

    //小图片
    ul{
        // 必须要有定位才可以调用动画脚本(offsetLeft)
        position: absolute;
        top: 0;
        left: 0;
        width: 600%;

        li{
            float: left;
            width: 100vh;
            height: 60vh;
        }
    }
    //小按钮
    .icomoon{
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        display: inline-block;
        width: 5vh;
        height: 10vh;
        background-color: #494949;
        text-align: center;
        line-height: 10vh;
        color: #fff;
        z-index: 99;
        &:hover{
            color: #0d9eb8;
        }
    }
    .icon-circle-left{
        left: 0;
        border-radius: 0 10vh 10vh 0;
    }
    .icon-circle-right{
        right: 0;
        border-radius: 10vh 0 0 10vh;
    }

    // 小点点
    ol{
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: 5vh;
        left: 50%;
        width: 50%;
        transform: translate(-50%);
        li{
            display: inline-block;
            width: 2vh;
            height: 2vh;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 5px 5px #f1f1f1;
            cursor: pointer;
        }
    }
}

.moli-first{
    display: inline-block;
    width: 2vh;
    height: 2vh;
    background-color: #0fbfcc!important;
    border-radius: 50%;
    box-shadow: 0 0 5px 5px #f1f1f1;
    cursor: pointer;
}

第四步：JS书写与调用

//moli-first  小圆点变化CSS样式
//.max-box    大盒子
//.icomoon    左右按钮
//ul.ol等... 
window.addEventListener('load',function(){
    // alert('检测');

    const icomoon = document.querySelectorAll('.icomoon');
    const maxbox = document.querySelector('.max-box');
    // console.log(icomoon);

    //左右按钮
    maxbox.addEventListener('mouseover',()=>{
        icomoon[0].style.display = 'inline-block';
        icomoon[1].style.display = 'inline-block';
        clearInterval(imgtimer);
        imgtimer = null;//清除定时器变量
    })
    maxbox.addEventListener('mouseout',()=>{
        icomoon[0].style.display = 'none';
        icomoon[1].style.display = 'none';
        imgtimer = window.setInterval(function(){
            //手动调用后侧点击事件
            icomoon[1].click();
        },3000);
    })

    //小圆圈
    const ul = maxbox.querySelector('ul');
    const ol = maxbox.querySelector('ol');
    for(var i = 0;i < ul.children.length;i++){
        //创建li
        const cli = document.createElement('li');
        //记录当前小圆圈的索引号，为后面动画移动做自定义属性
        cli.setAttribute('index',i);
        //放置li
        ol.appendChild(cli);
        //在生成小圆圈的同时绑定点击事件（排他思想）
        cli.addEventListener('click',function(){
            for(let i = 0;i < ol.children.length;i++){
                ol.children[i].className = '';
            }
                this.className = 'moli-first';
            //点击小圆圈,移动图片
            //获取图片的宽度
            let maxboxWidth = maxbox.clientWidth;
            //拿到当前li的索引号
            let index = this.getAttribute('index');
            //把li索引号的值给到全局变量number(控制左后按钮)
            number = index;
            //把li索引号给到全局变量circle(控制小圆圈)
            circle = index;
            // console.log(maxboxWidth);
            // console.log(index);
            getAnimal(ul,-index * maxboxWidth);
        })
    }
    //设置默认第一个li选中状态
    ol.children[0].className = 'moli-first';

    //点击右侧按钮图片移动一张
    let number = 0;
    let maxboxWidth = maxbox.clientWidth;
    //控制小圆圈
    let circle = 0;
    //克隆
    let firstli = ul.children[0].cloneNode(true);
    //放到ul最后
    ul.appendChild(firstli); 
    //flag节流阀
    let flag = true;
    icomoon[1].addEventListener('click',()=>{
        if(flag == true){
            flag = false;
            if(number == ul.children.length - 1){
                ul.style.left = '0';
                number = 0;
            }
            number++;
            getAnimal(ul,-number * maxboxWidth,()=>{
                flag = true;//打开节流阀
            });
            circle++;
            if(circle == ol.children.length){
                circle = 0;
            }
            circleChange();
        }
    });

    icomoon[0].addEventListener('click',()=>{
        if(flag == true){
            flag = false;
            if(number == 0){
                number = ul.children.length - 1;
                ul.style.left = -number * maxbox.clientWidth + 'px';
            }
            number--;
            getAnimal(ul,-number * maxboxWidth,()=>{
                flag = true;
            });
            circle--;
            if(circle < 0){
                circle = ol.children.length - 1;
            }
           circleChange();
        }
    });

    function circleChange(){
        for(let i = 0;i < ol.children.length;i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'moli-first';
    }

    //定时器
    let imgtimer = window.setInterval(()=>{
        //手动调用右侧点击事件
        icomoon[1].click();
    },3000);
})

Try Tomato

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯原生JS打造轮播图？

目录第一步:自己封装一个轮播图动画（缓动动画）第二步：构建HTMLUI页面第三步：Less书写（CSS）第四步：JS书写与调用第一步:自己封装一个轮播图动画（缓动动画）//Obj 对象//targetleft 移动距离//callback 回调函数function getAnimal(obj,target,callback){ clearInterval(obj.timer) obj.timer = setInterval( (..
复制链接

扫一扫