08-JavaScript II （轮播图案例）

最新推荐文章于 2024-06-12 11:59:04 发布
最新推荐文章于 2024-06-12 11:59:04 发布
阅读量49 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yfp020907/article/details/132698955
版权

封装函数

// 封装匀速动画函数
// ele  谁
// time 间歇定时器的时间
// step 步长
// target 目标
function moveX(ele, time, step, target) {

    clearInterval(ele.timeId)
    ele.timeId = setInterval(function () {
        var speed = ele.offsetLeft < target ? step : -step;
        ele.style.left = Math.abs(target - ele.offsetLeft) >= step ? ele.offsetLeft + speed + 'px' : target + 'px';
    }, time);
}
function moveY(ele, time, step, target) {
    clearInterval(ele.timeId);
    ele.timeId = setInterval(function () {
        var speed = ele.offsetTop < target ? step : -step;
        ele.style.top = Math(target - ele.offsetTop) >= step ? ele.offsetTop + speed + 'px' : target + 'px';
    }, time);
}


// 缓动动画封装
function slowMove(ele, target, time) {
    clearInterval(ele.timeId);
    ele.timeId = setInterval(function () {
        if (ele.offsetLeft < target) {
            ele.style.left = ele.offsetLeft + Math.ceil((target - ele.offsetLeft) / 10) + 'px';
        } else {
            ele.style.left = ele.offsetLeft + Math.floor((target - ele.offsetLeft) / 10) + 'px';
        }
    }, time)
}

1.缓动动画

<!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>Document</title>
    <style>
        .father {
            width: 1000px;
            height: 600px;
            margin: 30px auto;
            position: relative;
            border: 1px solid red;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <input type="button" value="向右">
    <input type="button" value="向左">
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        // 获取按钮节点
        var btn1 = document.getElementsByTagName('input')[0];
        var btn2 = document.getElementsByTagName('input')[1];

        // 获取father节点
        var father = document.getElementsByClassName('father')[0];
        // 获取son节点
        var son = document.getElementsByClassName('son')[0];


        var time;
        btn1.onclick = function () {
            clearInterval(time);
            time = setInterval(function () {
                son.style.left = son.offsetLeft + Math.ceil((900 - son.offsetLeft) / 10) + 'px';
            }, 30)
        }
        btn2.onclick = function () {
            clearInterval(time);
            time = setInterval(function () {
                son.style.left = son.offsetLeft + Math.floor((0 - son.offsetLeft) / 10) + 'px';
            }, 30)
        }
    </script>
</body>

</html>

2.焦点轮播

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            height: 400px;
            margin: 30px auto;
            overflow: hidden;
            position: relative;
        }

        .box ul {
            width: 4000px;
            height: 400px;
            position: absolute;
        }

        .box ul li {

            float: left;
        }

        .quan {
            position: absolute;
            left: 50%;
            bottom: 30px;
            margin-left: -75px;
        }

        .quan div {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            background-color: white;
            margin: 0 10px;
        }

        .active {
            background-color: red !important;
        }
    </style>

</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/img1.png" alt="">
            </li>
            <li>
                <img src="./images/img2.png" alt="">
            </li>
            <li>
                <img src="./images/img3.png" alt="">
            </li>
            <li>
                <img src="./images/img4.png" alt="">
            </li>
            <li>
                <img src="./images/img5.png" alt="">
            </li>
        </ul>
        <div class="quan">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script src="./index.js"></script>
    <script>
        var oul = document.getElementsByTagName('ul')[0];
        var dot = document.getElementsByClassName('quan')[0].children;


        // 封装排他函数
        function Fun(ele) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = '';
            }
        }
        // 循环绑定
        for (var i = 0; i < dot.length; i++) {
            dot[i].index = i;
            dot[i].onclick = function () {
                var cont = this.index;
                slowMove(oul, cont * -800, 10);
                Fun(dot);
                this.className = 'active';

            }
        }
    </script>
</body>

</html>

3.焦点轮播箭头版

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            height: 400px;
            margin: 30px auto;
            overflow: hidden;
            position: relative;
        }

        .box ul {
            width: 4000px;
            height: 400px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .box ul li {
            width: 800px;
            height: 400px;
            float: left;
        }

        .quan {
            position: absolute;
            left: 50%;
            bottom: 30px;
            margin-left: -75px;
        }

        .quan div {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            background-color: white;
            margin: 0 10px;
        }

        .left,
        .right {
            width: 50px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            text-align: center;
            line-height: 100px;
            top: 50%;
            margin-top: -50px;
        }

        .left {
            left: 0px;

        }

        .right {
            right: 0px;
        }

        .active {
            background-color: red !important;
        }
    </style>
    <script src="index.js"></script>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/img1.png" alt="">
            </li>
            <li>
                <img src="./images/img2.png" alt="">
            </li>
            <li>
                <img src="./images/img3.png" alt="">
            </li>
            <li>
                <img src="./images/img4.png" alt="">
            </li>
            <li>
                <img src="./images/img5.png" alt="">
            </li>
        </ul>
        <div class="quan">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <script>
        var oul = document.getElementsByTagName('ul')[0];
        var dot = document.getElementsByClassName('quan')[0].children;

        var _left = document.getElementsByClassName('left')[0];
        var _right = document.getElementsByClassName('right')[0];


        // 封装排他函数
        function Fun(ele) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = '';
            }
        }
        // 准备一个计数器，默认从零开始
        var cont = 0;


        // 小圆点的事件
        for (var i = 0; i < dot.length; i++) {
            dot[i].index = i;
            dot[i].onclick = function () {
                // 让计数器变为此时的 i
                cont = this.index;
                // 调用缓动函数
                slowMove(oul, cont * -800, 10);
                Fun(dot);
                this.className = 'active';
            }
        }
        // 左边点击事件
        _left.onclick = function () {
            // 如果已经到了第一张，再点击跳到最后一张
            if (cont <= 0) {
                cont = 4;
            } else {
                cont--;
            }
            Fun(dot);
            dot[cont].className = 'active';
            slowMove(oul, cont * -800, 10);
        }
        // 右边添加点击事件
        _right.onclick = function () {
            if (cont >= 4) {
                cont = 0;
            } else {
                cont++;
            }
            Fun(dot);
            dot[cont].className = 'active';
            slowMove(oul, cont * -800, 10);
        }
    </script>
</body>

</html>

4.自动轮播

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            height: 400px;
            margin: 30px auto;
            overflow: hidden;
            position: relative;
        }

        .box ul {
            width: 4000px;
            height: 400px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .box ul li {
            width: 800px;
            height: 400px;
            float: left;
        }

        .quan {
            position: absolute;
            left: 50%;
            bottom: 30px;
            margin-left: -75px;
        }

        .quan div {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            background-color: white;
            margin: 0 10px;
        }

        .left,
        .right {
            width: 50px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            text-align: center;
            line-height: 100px;
            top: 50%;
            margin-top: -50px;
        }

        .left {
            left: 0px;
            display: none;

        }

        .right {
            right: 0px;
            display: none;
        }

        .active {
            background-color: red !important;
        }
    </style>
    <script src="../代码练习II/index.js"></script>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="../代码练习II/images/img1.png" alt="">
            </li>
            <li>
                <img src="../代码练习II/images/img2.png" alt="">
            </li>
            <li>
                <img src="../代码练习II/images/img3.png" alt="">
            </li>
            <li>
                <img src="../代码练习II/images/img4.png" alt="">
            </li>
            <li>
                <img src="../代码练习II/images/img5.png" alt="">
            </li>
        </ul>
        <div class="quan">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <script>
        var oul = document.getElementsByTagName('ul')[0];
        var dot = document.getElementsByClassName('quan')[0].children;

        var _left = document.getElementsByClassName('left')[0];
        var _right = document.getElementsByClassName('right')[0];

        var box = document.getElementsByClassName('box')[0];


        function Fun(ele) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = '';
            }
        }


        // 自动轮播定时器
        var autoTime;
        // 计数器
        var cont = 0;

        // 把轮播的动作封装为函数
        function autoPlay() {
            autoTime = setInterval(function () {
                // if (cont >= 4) {
                //     cont = 0;
                // } else {
                //     cont++;
                // }
                // slowMove(oul, cont * -800, 30);
                // Fun(dot);
                // dot[cont].className = 'active';

                _right.onclick();
            }, 2000)
        }

        autoPlay();

        box.onmouseover = function () {
            clearInterval(autoTime);
            _left.style.display = 'block';
            _right.style.display = 'block';
        }
        box.onmouseout = function () {
            autoPlay();
            _left.style.display = 'none';
            _right.style.display = 'none';

        }

        // 小圆点的事件
        for (var i = 0; i < dot.length; i++) {
            dot[i].index = i;
            dot[i].onclick = function () {
                // 让计数器变为此时的 i
                cont = this.index;
                // 调用缓动函数
                slowMove(oul, cont * -800, 10);
                Fun(dot);
                this.className = 'active';
            }
        }
        // 左边点击事件
        _left.onclick = function () {
            // 如果已经到了第一张，再点击跳到最后一张
            if (cont <= 0) {
                cont = 4;
            } else {
                cont--;
            }
            Fun(dot);
            dot[cont].className = 'active';
            slowMove(oul, cont * -800, 10);
        }
        // 右边添加点击事件
        _right.onclick = function () {
            if (cont >= 4) {
                cont = 0;
            } else {
                cont++;
            }
            Fun(dot);
            dot[cont].className = 'active';
            slowMove(oul, cont * -800, 10);
        }



    </script>
</body>

</html>

5.无缝轮播

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            height: 400px;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }

        .box ul {
            width: 4800px;
            height: 400px;
            position: absolute;
            top: 0px;
            left: 0px;

        }

        .box ul li {
            width: 800px;
            height: 400px;
            float: left;
        }

        .quan {
            position: absolute;
            left: 50%;
            bottom: 10px;
            margin-left: -75px;
        }

        .quan div {
            width: 10px;
            height: 10px;
            background-color: white;
            float: left;
            margin: 0 10px;
            border-radius: 50%;
        }

        .left,
        .right {
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 50%;
            margin-top: -50px;
            font-size: 30px;
            display: none;
        }

        .left {
            left: 0px;
        }

        .right {
            right: 0px;
        }

        .active {
            background-color: red !important;
        }
    </style>
    <script src="index.js"></script>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="../代码练习II/images/img1.png" alt="">
            </li>
            <li>
                <img src="../代码练习II/images/img2.png" alt="">

            </li>
            <li>
                <img src="../代码练习II/images/img3.png" alt="">

            </li>
            <li>
                <img src="../代码练习II/images/img4.png" alt="">

            </li>
            <li>
                <img src="../代码练习II/images/img5.png" alt="">

            </li>
            <li>
                <img src="../代码练习II/images/img1.png" alt="">

            </li>
        </ul>
        <div class="quan">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <script>
        // 获取节点
        // 获取大家盒子节点
        var box = document.getElementsByClassName('box')[0];
        // 获取ul节点
        var oul = document.getElementsByTagName('ul')[0];
        // 获取小圆点节点
        var bot = document.getElementsByClassName('quan')[0].children;
        // 获取左右按钮节点
        var _left = document.getElementsByClassName('left')[0];
        var _right = document.getElementsByClassName('right')[0];

        // 封装排他函数
        function Fun(ele) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].className = '';
            }
        }

        // 图片计数器
        var tCont = 0;

        // 小圆点计数器
        var oCont = 0;

        // 计时器
        var timeId;

        // 给左右按钮添加点击事件
        _left.onclick = function () {
            if (tCont <= 0 || tCont > 4) {
                oul.style.left = -4000 + 'px';
                tCont = 4;
                oCont = 4
            } else {
                tCont--;
                oCont--;
            }
            // if (tCont <= 0) {
            //     oCont = 4;
            // } else {
            //     oCont--;
            // }
            slowMove(oul, tCont * -800, 30);
            Fun(bot);
            bot[oCont].className = 'active';
        }
        _right.onclick = function () {
            if (tCont > 4) {
                oul.style.left = 0 + 'px';
                tCont = 1;
            } else {
                tCont++;
            }
            if (tCont > 4) {
                oCont = 0;

            } else {
                oCont++;
            }
            slowMove(oul, tCont * -800, 30);
            Fun(bot);
            bot[oCont].className = 'active';

        }
        // 自动轮播
        function autoTime() {
            timeId = setInterval(function () {
                _right.onclick()
            }, 2000)
        }
        autoTime();

        // 给box添加移入和移出事件
        box.onmouseover = function () {
            _left.style.display = 'block';
            _right.style.display = 'block';
            clearInterval(timeId);
        }
        box.onmouseout = function () {
            _left.style.display = 'none';
            _right.style.display = 'none';
            autoTime();
        }

        // 焦点轮播
        for (var i = 0; i < bot.length; i++) {
            bot[i].index = i;
            console.log(bot[i].index);
            bot[i].onclick = function () {
                oul.style.left = oCont * -800 + 'px';
                tCont = this.index;
                oCont = this.index;
                slowMove(oul, tCont * -800, 30);
                Fun(bot);
                this.className = 'active';
            }
        }
    </script>
</body>

</html>

yfp020907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[HTML CSS JavaScript JQuery Bootstrap 开发] 由浅到深，搭建网站首页，实现轮播图
SolarL的博客
05-06 1631
由浅到深，多种方式搭建网站首页，实现轮播图写在前面1. 网站首页2. 通过 HTML 搭建网站3. 通过 DIV+CSS 来优化网站首页4. JavaScript 实现图片轮播图5. Bootstrap 框架完成响应式网站首页及轮播图结束语 写在前面 本篇主要是能使前端知识有较好的应用和掌握，学习完零散的知识点后需要应用到实际案例才能有更好的理解和掌握。 应用HTML超文本标记语言 CSS样式 ...
案例——微金所页面
Sweat_candy的博客
04-05 1195
1.效果图 2.整体页面结构块 <!--顶部通栏--> <header class="wjs_header"></header> <!--导航--> <nav class="wjs_nav"></nav> <!--banner轮播图--> <div class="wjs_banner"></div> <!--信息--> <div class="wjs_info"></d
JavaScript之手把手教你做轮播图
热门推荐
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
JavaScript⑤(常见网页特效案例、补充知识点、移动端网页特效、本地存储)
DeDeDeFeng的博客
08-27 492
移动端浏览器兼容性较好，我们不需要考虑以前JS 的兼容性问题，可以放心的使用原生JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android和IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touchmove手指在一个 DOM 元素上滑动时触发touchend。
JavaScript之手把手教你做轮播图，2024年最新字节面试官迟到
m0_60749700的博客
04-10 398
这么做。
WEB前端笔记3——JavaScript案例
积石成岩，流则不荒
04-13 225
0 总述   我太懒了我太懒了我太懒了啊啊啊啊啊啊啊啊啊啊啊   4/11/2019 0.1 地图 1 JS概述 JS开发：是一门脚本语言，有浏览器来解释执行，不需要经过编译； JS声明变量：var 变量的名字； JS声明函数：function name(){} JS开发的步骤： 1.确定事件 2.事件触发函数，声明函数 3.函数里面通常做一些交互操作：弹框、修改页面内容、动态添加内容 ...
JavaScript pink老师学习内容详解
starry-sea1412的博客
05-15 761
JavaScript 具有很多优点，例如语法简单、易读易写、可扩展性强、与 HTML 和 CSS 集成良好、兼容多种浏览器等等。同时，JavaScript 还拥有丰富的生态系统，包括多种库、框架和工具，如 React.js、Vue.js、Angular.js、Jest、Webpack 等等，这些工具可以帮助开发者更加高效、简便地进行 Web 开发
JavaScript之setTimeout与setInterval的用法与区别
跳探戈的小龙虾的博客
04-06 1756
setTimeout(): 该函数能够按照设定的时间值延迟执行其中的事件。 setInterval(): 该函数能够按照设定的时间值作为间隔，周期性的执行其中的时间。 setTimeout()是一个异步执行函数，说人话就是，它里面的函数体，并不会在每一次执行的时候立刻运行，而是会丢进执行队列中，等待"主线任务"全部完成，才会执行它。 使用let之后，也没有改变执行机制，仍然是最后执行的alert()，但是let可以在每一次把更新的变量i传进函数体内。
javascript基础、web API（1）
qq_50883182的博客
07-04 238
文章目录一、js二、基本使用1.弹窗2.总结 一、js 学后端的必须会js 二、基本使用 1.弹窗 写js两种方法： ① html内写： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--script写的位置可以在head内，也可以在body内的最后--> <scrip
JavaScript案例-js轮播图
02-16
JavaScript案例-js轮播图
JavaScript-轮播图案例展示
09-08
JavaScript轮播图代码资源
前端-JavaScript-PC端轮播图
09-26
js实现pc端轮播图
javascript 图片轮播代码案例
11-07
自己闲时写的，图片轮播代码案例，供大家参考
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1333
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 447
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1247
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值