JavaScript手写轮播

shan33__

于 2024-03-09 08:45:41 发布

阅读量363

点赞数 13

分类专栏：经典例题文章标签： javascript css css3

本文链接：https://blog.csdn.net/shan33__/article/details/136576913

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文介绍了如何使用HTML和CSS创建页面布局，然后结合JavaScript编写动画和轮播功能，包括图片切换、指示器控制和箭头导航。关键代码展示了如何处理DOM操作和定时器以实现流畅的轮播效果。

摘要由CSDN通过智能技术生成

html页面代码：此页面将大体的排版先做完。为后续编写js代码打下基础。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        #banner {
            width: 800px;
            height: 400px;
            background-color: aquamarine;
            margin: 10px auto;
            position: relative;
        }

        #banner .pic_box {
            width: calc(100%*4);
            /* 动态生成宽度，直接生成多少倍，之后宽度需要通过JavaScript动态计算宽度 */
            height: 100%;
            background-color: blanchedalmond;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #banner .pic_box li {
            width: 800px;
            height: 400px;
            line-height: 400px;
            text-align: center;
            font-size: 50px;
            float: left;
        }

        .cir {
            width: auto;
            height: 40px;
            /* background-color: brown; */
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);

        }

        .cir li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: blanchedalmond;
            float: left;
            text-align: center;
            margin: 0px 5px;
            color: rgb(17, 18, 18);
        }

        .cir li.active {
            background-color: cadetblue;
        }

        .left {
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: aliceblue;
            position: absolute;
            left: 0px;
            top: 50%;
            display: none;
            transform: translateY(-50%);

        }

        .right {
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: aliceblue;
            position: absolute;
            right: 0px;
            top: 50%;
            display: none;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div id="banner">
        <ul class="pic_box">
            <!-- 图片区 -->
            <li style="background-color: blue;">0</li>
            <li style="background-color: rgb(64, 64, 127);">1</li>
            <li style="background-color: rgb(234, 255, 0);">2</li>
            <li style="background-color: rgb(221, 0, 255);">3</li>
        </ul>
        <ol class="cir">
            <!-- 指示器 -->
            <!-- <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li> -->
        </ol>
        <!-- 左右箭头 -->
        <span class="left">向左</span>
        <span class="right">向右</span>
    </div>
    <!-- 引入封装动画的js -->
    <script src="./animate.js"></script>
<script src="./轮播.js"></script>
</body>

</html>

需要引入之前写好的动画的js代码和另外引入一个js页面用来编写轮播效果。注意:先引入animate.js文件再引入轮播.js。

animate.js代码：

 //封装一下
        // obj 对象  target 目标位置  callback回调函数 -可选
        function animate(obj,target,callback){

            clearInterval(obj.timer);//防止定时器累加  或来回拉扯的过程
            obj.timer=  setInterval(function () {
                // 获得小球当前的位置
                var l=obj.offsetLeft;
                var speed=(target-l)/10;
                 speed= speed>0? Math.ceil(speed):Math.floor(speed)
                if(obj.offsetLeft==target){
                    clearInterval(obj.timer);
                    callback&&callback();
                }
                //让小球 改变位置
                obj.style.left=l+speed+'px'
            }, 25)

        }

轮播,js代码：

var btnl = document.querySelector('.left');
var btnr = document.querySelector('.right');
var banner = document.querySelector('#banner');
var pic_box = document.querySelector('.pic_box');
var cir = document.querySelector('.cir');
var picli = document.querySelectorAll('.pic_box>li');
var cli = document.querySelectorAll('.cir>li');
console.log(btnl, btnr, banner, pic_box, cir);
var liw = picli[0].offsetWidth;
var timer = null;
var flag = true; //用一个标识来当节流阀。
//1.鼠标经过移开，按钮隐藏
banner.onmouseenter = function () {
    btnl.style.display = 'block';
    btnr.style.display = 'block';
    clearInterval(timer)
}
banner.onmouseleave = function () {
    btnl.style.display = 'none';
    btnr.style.display = 'none';
    timer = setInterval(function () {
        btnr.onclick();
    }, 2500)
}
// 功能三：小圆点
for (let i = 0; i < picli.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = i;
    cir.appendChild(li);
    li.onclick = function () {
        for (let j = 0; j < cir.children.length; j++) {
            cir.children[j].className = '';

        }
        index = i;
        num = i;

        cir.children[i].className = 'active';
        animate(pic_box, -liw * i)

    }
}
cir.children[0].className = 'active';
// 功能二：点击向右的箭头，图片向左移动
//计算li的大小

//
var coneLi = picli[0].cloneNode(true);
pic_box.appendChild(coneLi); //追加克隆的节点

picli = document.querySelectorAll('.pic_box>li');
console.log(picli.length);
pic_box.style.width = liw * picli.length + 'px';


var index = 0;
var num = 0;
// 记录图片的索引号
btnr.onclick = function () {
    if (flag) {
        flag = false;
        if (index == picli.length - 1) {
            index = 0;
            pic_box.style.left = '0';
        }
        index++;
        animate(pic_box, -liw * index, function () {
            flag = true;
        })
        // 4.
        num++;

        if (num == picli.length - 1) {
            num = 0;
        }
        circhange(num)
    }

    // pic_box.style.left =index* -800 + 'px';

}
btnl.onclick = function () {
    if (flag) {
        flag = false;
        if (index == 0) {
            index = picli.length - 1;
            pic_box.style.left = -index * liw + 'px'
        }
        index--;
        animate(pic_box, -liw * index, function () {
            flag = true;
        })
        if (num == 0) {
            num = picli.length - 1;
        }
        num--;
        circhange(num);


    }

}

// 功能四：单击向右，小圆点变换。
// 封装一个函数出来
function circhange(num) {
    for (let j = 0; j < cir.children.length; j++) {
        cir.children[j].className = '';

    }
    cir.children[num].className = 'active';
}

// 自动轮播功能
timer = setInterval(function () {
    btnr.onclick();
}, 2500)

// 解决bug  单击按钮图片刷新过快。
// 搞一个节流阀出来（节流和防抖的作用）
// 一张图片没有走完之前，不能点击第二次。
// var flag = true;