js简单轮播图

最新推荐文章于 2024-07-25 15:46:04 发布

切图仔七七

最新推荐文章于 2024-07-25 15:46:04 发布

阅读量276

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_61629964/article/details/122276282

版权

<!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>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            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-radius: 50%;
            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;
        }
    </style>
</head>

<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>
    <script src="../animate.js"></script>
    <script>
        //1.获取元素
        let box = document.getElementById('box'); //整个大盒子
        let screenBox = document.querySelector('.screen');
        let unitWidth = screenBox.offsetWidth; //单位宽度
        let ul1 = document.querySelector('.screen>ul'); //要做动画的的ul
        let lisUL = ul1.children;
        let ol1 = document.querySelector('.screen>ol'); //包含右下角ol
        let showArr = document.getElementById('arr'); //包含左右焦点的盒子
        let leftBtn = document.getElementById('left') //左边焦点
        let rightBtn = document.getElementById('right') //右边焦点
        //声明一个变量,来记录点击次数
        let picIndex = 0;
        let timerId=null;
        //2.根据轮播图的图片多少设置右下角的方块
        for (let i = 0; i < lisUL.length; i++) {
            //创建li标签
            let liNew = document.createElement('li');
            liNew.textContent = i + 1;
            //把这个创建的li标签追加到ol标签里面
            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 idx = this.getAttribute('index');
                console.log(idx);
                let target = -idx * unitWidth;
                picIndex = idx;
                // 调用anlmate方法
                animate(ul1, target);
            }
        }
        // ***** 让左右焦点的picIndex值为当前点击的小方块索引的index

        //把轮播图的第一张克隆到第一张图片追加到最后
        ul1.appendChild(lisUL[0].cloneNode(true));


        //4.左右焦点轮播
        //  大盒子设置鼠标移入移出事件.
        //      让左右焦点显示隐藏.
        box.onmouseover = function () {
            showArr.style.display = 'block'
            clearInterval(timerId);
        }
        box.onmouseout = function () {
            showArr.style.display = 'none'
            timerId=setInterval(showNextPic,5000);
        }
        //  右边焦点设置点击事件.
        rightBtn.onclick = function () {
          showNextPic();
        }
        function showNextPic(){
             //移出去图片的个数++
             if (picIndex == 5) {
                picIndex = 0;
                // 定位的left变为0
                ul1.style.left = '0px';
            }
            picIndex++;
            // 动画目标的位置=当前点击的小方块的索引* 单位宽
            let target = -picIndex * unitWidth;
            // 调用anlmate方法
            animate(ul1, target);
            for (let i = 0; i < lisOL.length; i++) {
                lisOL[i].removeAttribute('class');
            }
            if(picIndex==5){
                lisOL[0].setAttribute('class','current');
            }else{
                lisOL[picIndex].setAttribute('class', 'current');
            }
        }
        leftBtn.onclick = function () {
            if (picIndex == 0) {
                picIndex = 5;
                // 定位的left变为0
                ul1.style.left = -picIndex*unitWidth+'px';
            }
            //移出去图片的个数--;
            picIndex--;
            // 动画目标的位置=当前点击的小方块的索引* 单位宽
            let target = -picIndex * unitWidth;
            // 调用anlmate方法
            animate(ul1, target);
            for (let i = 0; i < lisOL.length; i++) {
                lisOL[i].removeAttribute('class');
            }
            console.log(picIndex);
            lisOL[picIndex].setAttribute('class', 'current');
        }
        //设置计时器
        timerId=setInterval(showNextPic,5000);
    </script>
</body>

</html>

图片文件:

百度网盘链接：https://pan.baidu.com/s/1_MyK1uwiRCIk1z7-a1l4CQ
提取码：pqq1

切图仔七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单轮播图

<!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>完.
复制链接

扫一扫