JS轮播图的切换（原生js）

最新推荐文章于 2024-05-16 09:05:51 发布

pc_going

最新推荐文章于 2024-05-16 09:05:51 发布

阅读量131

点赞数

分类专栏：前端文章标签： html html5 css javascript

本文链接：https://blog.csdn.net/pc_going/article/details/120407629

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

各大网站中都有轮播图的应用，这里简单的分享下~

HTML部分

<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="./images/1.jpg" width="500" height="200" /></li>
                <li><img src="./images/2.jpg" width="500" height="200" /></li>
                <li><img src="./images/3.jpg" width="500" height="200" /></li>
                <li><img src="./images/4.jpg" width="500" height="200" /></li>
                <li><img src="./images/5.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
                <!-- 动态创建的小方块，添加在这里 -->
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>

CSS部分


        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }

动画效果 animate方法


 
function animate(ele,target) {
    //清空计时器
    clearInterval(ele.timerId);
    //设置计时器
    ele.timerId = setInterval(function () {
        let currentLeft = ele.offsetLeft;
        //定义每次移动的步长
        let step = currentLeft < target ? 29 : -29;
        currentLeft += step;
        if (Math.abs(currentLeft - target) > Math.abs(step)) {
            ele.style.left = currentLeft + 'px';
        } else {
            ele.style.left = target + 'px';
            //清空计时器
            clearInterval(ele.timerId);
        }
    }, 50);
}

js部分

 //1.获取元素
        let box = document.getElementById('box'); 
        let screenDiv = document.querySelector('#box>.screen');
        let unitWidth = screenDiv.offsetWidth; //移动的单位宽
        let ul1 = document.querySelector('#box ul'); //要做动画的ul
        let lisUL = ul1.children; //ul中的li标签们
        let ol1 = document.querySelector('#box ol'); //存放右下角小方块的ol
        let arrDiv = document.getElementById('arr'); 
        let leftBtn = document.getElementById('left');
        let rightBtn = document.getElementById('right');
        //声明一个变量，用来记录左右焦点图片移出去的个数。
        let indexPic = 0;
        // 声明一个变量 用来记录计时器id
        let timerId;

        //2.根据轮播图片的个数，生成右下角的小li们
        for (let i = 0; i < lisUL.length; i++) {
            let liNew = document.createElement('li');
            liNew.innerText = i + 1;
            ol1.appendChild(liNew);
        }
        //默认把第一个小方块添加上颜色
        let lisOL = ol1.children; //右下角的小方块们
        lisOL[0].setAttribute('class', 'current');

        //3.简单轮播图
        //遍历右下角的小方块们
        for (let i = 0; i < lisOL.length; i++) {
            //给小方块添加索引
            lisOL[i].setAttribute('index', i);
            //给每一个小方块注册单击事件
            lisOL[i].onclick = function () {
                for (let j = 0; j < lisOL.length; j++) {
                    lisOL[j].removeAttribute('class');
                }
                this.setAttribute('class', 'current');
                //获取你当前点击的小方块的索引
                let index = this.getAttribute('index');
                //计算ul移动的距离
                let target = -index * unitWidth;
                //调用animate方法让ul移动
                animate(ul1, target);
                indexPic = index
            }
        }
        ul1.appendChild(lisUL[0].cloneNode(true));


        //4.左右焦点轮播图
        box.onmousemove = function () {
            arrDiv.style.display = 'block';
            clearInterval(timerId);
        }
        box.onmouseout = function () {
            arrDiv.style.display = 'none';
            timerId = setInterval(nextPic, 4000)
        }
        //右边焦点注册单机事件
        rightBtn.onclick = function () {
            nextPic();
        }

        function nextPic() {
            if (indexPic == 5) {
                indexPic = 0;
                ul1.style.left = '0px';

            }
            //移出去的图片个数++
            indexPic++;
            console.log(indexPic);
            let target = -indexPic * unitWidth;
            animate(ul1, target);
            for (let i = 0; i < lisOL.length; i++) {
                lisOL[i].removeAttribute('class');
            }
            if (indexPic == 5) {
                lisOL[0].setAttribute('class', 'current');
            } else {
                lisOL[indexPic].setAttribute('class', 'current');
            }
        }

        //左边焦点注册单击事件
        leftBtn.onclick = function () {
            if (indexPic == 0) {
                indexPic = 5;
                ul1.style.left = -5 * unitWidth + 'px';
            }
            indexPic--;
            console.log(indexPic);
            let target = -indexPic * unitWidth;
            animate(ul1, target);
            for (let i = 0; i < lisOL.length; i++) {
                lisOL[i].removeAttribute('class');
            }
            if (indexPic == -1) {
                lisOL[5].setAttribute('class', 'current');
            }
            lisOL[indexPic].setAttribute('class', 'current');

        }

        //计时器(给右焦点设置计时器)
        timerId = setInterval(nextPic, 3000)

pc_going

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS轮播图的切换（原生js）

各大网站中都有轮播图的应用，这里简单的分享下~HTML部分<body> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="./images/1.jpg" width="500" height="200" /></li> &
复制链接

扫一扫