2021-3-2打砖块游戏，轮播图，swiper，自执行函数

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量191 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53125679/article/details/114293496
版权

文章目录

打砖块

<!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>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            margin: 100px auto;
            position: relative;
        }
        
        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #e67e22;
            position: absolute;
            bottom: 40px;
            left: 250px;
        }
        
        .bat {
            width: 100px;
            height: 20px;
            background-color: #3498db;
            position: absolute;
            bottom: 0;
            left: 200px;
        }
        
        #brick div {
            width: 98px;
            border: 1px solid;
            height: 28px;
            position: absolute;
        }
    </style>
    <script src="js/untils.js"></script>
    <script>
        window.onload = function() {
            var box = document.querySelector(".box");
            var ball = document.querySelector(".ball");
            var bat = document.getElementById("bat");
            var brick = document.getElementById("brick");
            var brickDivs = brick.getElementsByTagName("div");
            //获取一个随机的水平方向的速度。
            var speedX = parseInt(Math.random() * 4 + 4);
            var speedY = parseInt(Math.random() * 3 + 6);

            var timer = setInterval(function() {
                ball.style.left = ball.offsetLeft + speedX + "px";
                ball.style.top = ball.offsetTop + speedY + "px"
                    //限制水平出界
                    //获取大盒子的宽
                var boxWidth = parseInt(getStyle(box, "width"));
                //获取大盒子的高
                var boxHeight = parseInt(getStyle(box, "height"));
                //获取小球的宽
                var ballWidth = parseInt(getStyle(ball, "width"));
                //获取小球的高
                var ballHeight = parseInt(getStyle(ball, "height"));
                var ballHeight = parseInt(getStyle(ball, "height"));
                if (ball.offsetLeft >= boxWidth - ballWidth || ball.offsetLeft <= 0) {
                    speedX *= -1;
                }
                if (ball.offsetTop >= boxHeight - ballHeight) {
                    // console.log(ball.offsetTop);
                    alert("游戏结束！");
                    clearInterval(timer);
                }
                //小球和木板进行碰撞检测
                if (crash(bat, ball)) {
                    speedY *= -1;
                }
                for (var i = 0; i < brickDivs.length; i++) {
                    if (crash(brickDivs[i], ball)) {
                        //发生了碰撞 ，小球的移动方向发生改变。
                        speedY *= -1;
                        //砖块消失
                        brickDivs[i].remove();
                        break;
                    }
                }
                if (ball.offsetTop <= 0) {
                    speedY *= -1;
                }
            }, 30)
            createBrick(40);
            new Drag("bat");
        }

        //obj 元素 attr 样式的属性
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                // ie低版本  元素.currentStyle.样式属性名
                // box.currentStyle.width 
                // box.currentStyle["width"]
                return obj.currentStyle[attr];
            } else {
                // 标准浏览器 getComputedStyle(要获取样式的元素)
                // getComputedStyle(box).width
                return getComputedStyle(obj)[attr];
            }
        }
        //创建砖块的函数 n是砖块的数量
        function createBrick(n) {
            var brick = document.getElementById("brick");
            for (var i = 0; i < n; i++) {
                var node = document.createElement("div");
                node.style.backgroundColor = randomColor();
                brick.appendChild(node);
                node.style.left = i % 5 * node.offsetWidth + "px";
                node.style.top = parseInt(i / 5) * node.offsetHeight + "px";
            }
        }

        function randomColor() {
            var str = "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
            return str;
        }

        function crash(node1, node2) {
            //第一个盒子四条边的位置
            var l1 = node1.offsetLeft;
            var r1 = node1.offsetLeft + node1.offsetWidth;
            var t1 = node1.offsetTop;
            var b1 = node1.offsetTop + node1.offsetHeight;

            //第二个盒子四条边的位置
            var l2 = node2.offsetLeft;
            var r2 = node2.offsetLeft + node2.offsetWidth;
            var t2 = node2.offsetTop;
            var b2 = node2.offsetTop + node2.offsetHeight;

            if (l2 > r1 || r2 < l1 || b1 < t2 || t1 > b2) {
                return false;
            } else {
                return true;
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <div class="ball"></div>
        <div class="bat" id="bat"></div>
        <div id="brick">
        </div>
    </div>
</body>

</html>

untils.js

function Drag(id) {
    this.box = document.getElementById(id);
    this.box.onmousedown = this.boxDown.bind(this);
    document.onmouseup = this.boxUp;
}
Drag.prototype.boxDown = function (ev) {
    //处理下兼容
    let e = ev || window.event;
    //记录鼠标按下时相对于盒子的位置。
    offsetX = e.clientX - this.box.offsetLeft;
    document.onmousemove = this.boxMove.bind(this);
}
Drag.prototype.boxMove = function (ev) {
    var e = ev || window.event;
    var l = e.clientX - offsetX;
    //限制出界
    if (l <= 0) {
        l = 0;
    }
    if (l >= 400) {
        l = 400;
    }
    this.box.style.left = l + "px";
}
Drag.prototype.boxUp = function () {
    document.onmousemove = null;
}
// node 运动的元素节点
// obj 样式对象
// callback 回调函数
function move(node, obj, callback) {
    // node节点也是一个对象。 可以自定义属性。
    clearInterval(node.timer);
    node.timer = setInterval(function () {
        //所有的运动都已经完成
        var isEnd = true;
        for (const attr in obj) {
            if (obj.hasOwnProperty(attr)) {
                //attr 属性名
                //ITarget，变化的值
                const iTarget = obj[attr];
                //获取运动的样式的当前数值
                var icur = null;
                if (attr == "opacity") {
                    icur = parseInt(getStyle(node, attr) * 100);
                } else {
                    icur = parseInt(getStyle(node, attr));
                }
                var speed = (iTarget - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
                // speed = Math.ceil(speed);
                //位置数值先运算。此时还未发生移动。
                icur += speed;
                if ((speed >= 0 && iTarget > icur) || (speed <= 0 && iTarget < icur)) {
                    //未完成情况
                    isEnd = false;
                } else {
                    //已完成
                    icur = iTarget;
                }
                //将运动的结果赋值给节点
                if (attr == "opacity") {
                    node.style.opacity = icur / 100;
                    node.style.filter = "alpha(opacity=" + icur + ")";
                } else {
                    node.style[attr] = icur + "px";
                }

            }
        }
        if (isEnd) {
            clearInterval(node.timer);
            //开始下一个运动，不能写死，
            if (callback) {
                callback();
            }
        }

    }, 30)
}
//obj 元素 attr 样式的属性
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj)[attr];
    }
}

测试碰撞

移动一个盒子撞到另一个盒子时显示“撞上了！”。

<!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>
        div {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        
        #box1 {
            background-color: skyblue;
            left: 200px;
            top: 200px;
        }
        
        #box2 {
            background-color: brown;
            left: 400px;
            top: 200px;
        }
    </style>
    <script>
        function Drag(id) {
            this.box = document.getElementById(id);
            this.box.onmousedown = this.boxDown.bind(this);
            this.box.onmouseup = this.boxUp;
        }
        Drag.prototype.boxDown = function(ev) {
            //处理下兼容
            let e = ev || window.event;
            //记录鼠标按下时相对于盒子的位置。
            offsetX = e.offsetX;
            offsetY = e.offsetY;
            document.onmousemove = this.boxMove.bind(this);
        }
        Drag.prototype.boxMove = function(ev) {
            var e = ev || window.event;
            this.box.style.left = e.pageX - offsetX + "px";
            this.box.style.top = e.pageY - offsetY + "px";
            var box2 = document.getElementById("box2");
            var flag = crash(this.box, box2);
            if (flag) {
                alert("撞上了！");
            }
        }
        Drag.prototype.boxUp = function() {
            document.onmousemove = null;
        }
        window.onload = function() {
                new Drag("box1");
            }
            //碰撞检测的函数
        function crash(node1, node2) {
            //第一个盒子四条边的位置
            var l1 = node1.offsetLeft;
            var r1 = node1.offsetLeft + node1.offsetWidth;
            var t1 = node1.offsetTop;
            var b1 = node1.offsetTop + node1.offsetHeight;
            //第二个盒子四条边的位置
            var l2 = node2.offsetLeft + node2.offsetWidth;
            var r2 = node2.offsetLeft + node2.offsetWidth;
            var t2 = node2.offsetTop;
            var b2 = node2.offsetTop + node2.offsetHeight;

            if (l2 > r1 || r2 < l1 || b1 < t2 || t1 > b2) {
                return false;
            } else {
                return true;
            }
        }
    </script>
</head>

<body>
    <div id="box1"> </div>
    <div id="box2"> </div>
</body>

</html>

在这里插入图片描述

完全体

让这个盒子，点击后，宽，高，透明度同时变化

<!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>
        #box {
            width: 100px;
            height: 100px;
            opacity: 1;
            background-color: brown;
            margin: 100px auto;
        }
    </style>
    <script>
        // node 运动的元素节点
        // obj 样式对象
        // callback 回调函数
        function move(node, obj, callback) {
            clearInterval(node.timer);
            node.timer = setInterval(function() {
                var isEnd = true;
                for (const attr in obj) {
                    if (obj.hasOwnProperty.call(obj, attr)) {
                        //attr 属性名
                        //ITarget，变化的值
                        const iTarget = obj[attr];
                        //获取运动的样式的当前数值
                        var icur = null;
                        if (attr == "opacity") {
                            icur = parseInt(getStyle(node, attr) * 100);
                        } else {
                            icur = parseInt(getStyle(node, attr));
                        }
                        var speed = (iTarget - icur) / 8;
                        speed = Math.ceil(speed);
                        //位置数值先运算。此时还未发生移动。
                        icur += speed;
                        if (speed >= 0 && iTarget > icur || (speed <= 0 && iTarget < icur)) {
                            //未完成情况
                            isEnd = false;
                        } else {
                            //已完成
                            icur = iTarget;
                        }
                        //将运动的结果赋值给节点
                        if (attr == "opacity") {
                            node.style.opacity = icur / 100;
                            node.style.filter = "alpha(opacity=" + icur + ")";
                        } else {
                            node.style[attr] = icur + "px";
                        }
                    }
                }
                if (isEnd) {
                    clearInterval(node.timer);
                    //开始下一个运动，不能写死，
                    if (callback) {
                        callback();
                    }
                }
            }, 30)
        }
        //obj 元素 attr 样式的属性
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj)[attr];
            }
        }
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function() {
                move(this, {
                    "width": "300",
                    "height": "500"
                })
            }
        }
    </script>
</head>

<body>
    <!-- 让这个盒子，点击后，宽，高，透明度同时变化 -->
    <div id="box"></div>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

轮播图

<!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;
        }
        
        #box {
            width: 950px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        
        #imgs {
            list-style: none;
            width: 3800px;
            height: 600px;
            position: absolute;
            left: 0;
        }
        
        #imgs li {
            width: 950px;
            height: 600px;
            float: left;
        }
        
        #imgs li img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        window.onload = function() {
            var imgs = document.getElementById("imgs");
            var fristLi = document.querySelectorAll("#imgs li")[0].cloneNode(true);
            imgs.appendChild(fristLi);
            var len = imgs.querySelectorAll("#imgs li").length;
            imgs.style.width = len * 950 + "px";
            setInterval(function() {
                //当最后一张图片走完后，应该让整个ul回到起点位置。
                imgs.style.left = imgs.offsetLeft - 2 + "px";
                if (imgs.offsetLeft <= -(len - 1) * 950) {
                    imgs.style.left = "0px";
                }
            }, 20)
        }
    </script>
</head>

<body>
    <div id="box">
        <ul id="imgs">
            <li>
                <img src="img/1.jpg" alt="">
            </li>
            <li>
                <img src="img/2.jpg" alt="">
            </li>
            <li>
                <img src="img/3.jpg" alt="">
            </li>
            <li>
                <img src="img/4.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>

轮播图缓冲

<!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;
        }
        
        #box {
            width: 950px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        
        #imgs {
            list-style: none;
            width: 3800px;
            height: 600px;
            position: absolute;
            left: 0;
        }
        
        #imgs li {
            width: 950px;
            height: 600px;
            float: left;
        }
        
        #imgs li img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="js/untils.js"></script>
    <script>
        window.onload = function() {
            var imgs = document.getElementById("imgs");
            var firstlLi = document.querySelectorAll("#imgs li")[0].cloneNode(true);
            imgs.appendChild(firstlLi);
            var len = imgs.querySelectorAll("#imgs li").length;
            imgs.style.width = len * 950 + "px";
            setInterval(function() {
                move(imgs, {
                    left: imgs.offsetLeft - 950
                }, function() {
                    if (imgs.offsetLeft <= -(len - 1) * 950) {
                        imgs.style.left = "0px";
                    }
                })
            }, 2000)
        }
    </script>
</head>

<body>
    <div id="box">
        <ul id="imgs">
            <li>
                <img src="img/1.jpg" alt="">
            </li>
            <li>
                <img src="img/2.jpg" alt="">
            </li>
            <li>
                <img src="img/3.jpg" alt="">
            </li>
            <li>
                <img src="img/4.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>

untils.js

function Drag(id) {
    this.box = document.getElementById(id);
    this.box.onmousedown = this.boxDown.bind(this);
    document.onmouseup = this.boxUp;
}
Drag.prototype.boxDown = function (ev) {
    //处理下兼容
    let e = ev || window.event;
    //记录鼠标按下时相对于盒子的位置。
    offsetX = e.clientX - this.box.offsetLeft;
    document.onmousemove = this.boxMove.bind(this);
}
Drag.prototype.boxMove = function (ev) {
    var e = ev || window.event;
    var l = e.clientX - offsetX;
    //限制出界
    if (l <= 0) {
        l = 0;
    }
    if (l >= 400) {
        l = 400;
    }
    this.box.style.left = l + "px";
}
Drag.prototype.boxUp = function () {
    document.onmousemove = null;
}
// node 运动的元素节点
// obj 样式对象
// callback 回调函数
function move(node, obj, callback) {
    // node节点也是一个对象。 可以自定义属性。
    clearInterval(node.timer);
    node.timer = setInterval(function () {
        //所有的运动都已经完成
        var isEnd = true;
        for (const attr in obj) {
            if (obj.hasOwnProperty(attr)) {
                //attr 属性名
                //ITarget，变化的值
                const iTarget = obj[attr];
                //获取运动的样式的当前数值
                var icur = null;
                if (attr == "opacity") {
                    icur = parseInt(getStyle(node, attr) * 100);
                } else {
                    icur = parseInt(getStyle(node, attr));
                }
                var speed = (iTarget - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
                // speed = Math.ceil(speed);
                //位置数值先运算。此时还未发生移动。
                icur += speed;
                if ((speed >= 0 && iTarget > icur) || (speed <= 0 && iTarget < icur)) {
                    //未完成情况
                    isEnd = false;
                } else {
                    //已完成
                    icur = iTarget;
                }
                //将运动的结果赋值给节点
                if (attr == "opacity") {
                    node.style.opacity = icur / 100;
                    node.style.filter = "alpha(opacity=" + icur + ")";
                } else {
                    node.style[attr] = icur + "px";
                }

            }
        }
        if (isEnd) {
            clearInterval(node.timer);
            //开始下一个运动，不能写死，
            if (callback) {
                callback();
            }
        }

    }, 30)
}
//obj 元素 attr 样式的属性
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj)[attr];
    }
}

缓冲测试

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/untils.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            left: 800px;
            top: 200px;
        }
        
        #line {
            width: 1px;
            height: 100%;
            background-color: black;
            position: absolute;
            left: 200px;
            top: 0;
        }
    </style>
    <script>
        window.onload = function() {
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            btn.onclick = function() {
                move(box, {
                    "left": "200"
                })
            }
        }
    </script>
</head>

<body>
    <button id="btn">开始运动</button>
    <div id="box">

    </div>
    <div id="line"></div>
</body>

</html>

swiper

swiper是一款免费，强大的滑动的插件。
使用步骤：
1.引入插件（可以使用网络地址，也可以下载到本地）
2.创建HTML结构
3.你可能想要给Swiper定义一个大小，当然不要也行。
4.初始化swiper

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
        
        .swiper-slide img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <!-- 白色 -->
        <div class="swiper-button-next swiper-button-white"></div>
        <!-- 黑色 -->

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            effect: 'cube',

            // 如果需要分页器
            // pagination: {
            //     el: '.swiper-pagination',
            // },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        })
    </script>

</body>

</html>

自执行函数

自执行函数：IIFE 在定义时立即执行的函数
1.声明一个函数
2.立刻调用。

函数分为两个阶段：
1.定义阶段
2.调用阶段

写法：
(function(形参){})(实参)
(function(形参){}(实参))

自执行函数的作用：
解决全局变量的污染

作用域：
全局作用域
局部作用域（函数作用域）
块级作用域

//之前
function show() {
            alert("方法执行了！");
        }
show();

var fn=function(){
            alert("fn函数：a="+a);
        }
fn(10);

//四种自执行函数写法，不用调用就可以执行
(function(a) {
      alert("fn函数：a=" + a);
})(10);//fn函数：a=10

(function() {
            alert("自执行函数第二种")
}());//自执行函数第二种

+function() {
            alert("自执行函数第三种")
}(); 

-function() {
            alert("自执行函数第四种")
}();

//自执行函数面对有返回值的不推荐使用，会把它当做运算符
var x = - function(a) {
            return a;
        }(123);
console.log(x);//-123

//当在外部引入两个js文件时，都有num，这时就会搞混
function showMoney() {
            alert("你账户余额为：" + num);
        }
showMoney();

可以使用自执行函数，将全局变量变为局部变量，解决全局变量的污染
//这是您的余额
(function(){
    var num = 100;
})()

//解决输出同一个的问题
window.onload = function() {
            var lis = document.querySelectorAll("li");
            for (var i = 0; i < lis.length; i++) {
                (function(i) {
                    lis[i].onclick = function() {
                        console.log(i);
                    }
                })(i);
            }
        }

在这里插入图片描述

棉花一朵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置css3动画的顺序,CSS3 “瓷砖”顺序飘落的动画
weixin_42360846的博客
08-04 259
CSS语言：CSSSCSS确定body {background: #555;}div,:before,:after {position: absolute;}.scene {top: 50%;left: 50%;width: 39em;height: 24em;transform: translate(-50%, -50%);box-shadow: 0 0 3px #000, 1px 1px 1p...
css动画-方块
weixin_46727994的博客
11-24 239
css动画 * { padding: 0; margin: 0; } body { width: 100vw; height: 100vh; background-color: #2c3e50; display: flex; justify-content: center; align-items: center; } main {
源码讲解knockout执行过程
qq_32506555的博客
07-28 424
knockout执行过程是怎么样的呢？你是不是还很迷惑。这里我就结合我自己学习knockout的总结和自己的开发经验给大家讲解一些，有源码哟。   一、执行流程 一、主要类分析   2.1. 在applyBindings中，创建bindingContext，然后执行applyBindingsToNodeAndDescendantsInternal方法
关于js中读取元素样式时浏览器的兼容问题
qq_36681922的博客
07-20 563
首先，我们的目的是通过js函数来读取html中的内联元素样式 这里有两个方法去读取样式 1.alert（元素.currentStyle.样式名） 2.alert（getComputedStyle(要获取样式的元素，一般为null)） 但是注意，第一个方法只能在IE浏览器中使用，其他浏览器不支持。而第二个方法却不支持IE8及
Knockout 重新绑定注意要点
weixin_30855761的博客
11-15 459
function ReImport(id) { //点击按钮时调用函数名称， var node = document.getElementById('bindingNode'); //bindingNode 为内部绑定订单子项的div或是table id，每次html(data)后会重新建立 if (node) { $(node)....
swiper-轮播图使用教程
qq_54054566的博客
04-08 5081
Swiper 使用方法 1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。 <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"> </head&g
使用uni-swiper-dot组件，开发轮播图
04-28
1、使用HbuildX工具，引入uni-ui插件，使用uni-swiper-dot组件，开发轮播图 2、轮播图的三种mode:nav、dot、indexes
vue轮播图插件vue-awesome-swiper
08-28
Vue-Awesome-Swiper 是一个功能强大且灵活的 Vue.js 轮播图插件，支持 Vue.js 1.x 到 2.x 版本，兼顾 PC 和移动端，SPA 和 SSR 应用场景。下面将详细介绍 Vue-Awesome-Swiper 的安装、配置、使用方法和事件处理。 ...
微信小程序实现的3d轮播图效果示例【基于swiper组件】
10-17
swiper用于包裹轮播内容，swiper-item表示单个轮播项，通常用于放置图片、文字等。 2. Swiper组件的属性设置： 在3D轮播图的实现中，通过设置swiper组件的属性可以达到视觉效果上的3D效果。例如，设置(previous-...
swiper 自动图片无限轮播实现代码
08-27
在 HTML 中，我们首先需要定义一个容器 `<div class="swiper-container">`，然后在容器中添加图片 `<div class="swiper-slide"><img src="" /></div>`。 接下来，我们需要在 JavaScript 中实例化 Swiper 对象，传入...
解决swiper 4 的坑~~
一个写代码的废物
10-17 5204
在以前的swiper版本里面，如果在vue项目中使用swiper非常简单，而且非常友善，但最近发现一个问题，按照以前在 this.$nextTick()方法里面创建Swiper实例已经不友好了，问题就是创建实例的速度比DOM加载的快，导致分页器内容空，小圆点不显示，自动轮播的功能也没有了，此时一脸懵逼，在一波度娘和swiper的论坛以后发现此问题并没解决，给出方法也只是setTimeout延迟加载...
小球撞击砖块C语言,制作一个小球撞击砖块游戏
weixin_28713947的博客
05-24 335
1.新建一个Plane2.新建一个Wall,编辑脚本生成6*8的墙using System.Collections;using System.Collections.Generic;using UnityEngine;public class Brick : MonoBehaviour {public GameObject brick;private int columnNum = 8;priva...
使用Bootstrap4中轮播效果做响应式轮播图
wuyuderen_lpt的博客
06-20 3141
Bootstrap4 轮播轮播是一个循环的幻灯片，创建了一个简单的图片轮播效果 ：注意：使用Bootstrap4时，&lt;script&gt; 标签放到页面底部的 &lt;/body&gt; 标签之前。注意顺序，jQuery 必须放在最前面，然后是 Popper.js，最后是我们自己的 JavaScript 插件。&lt;link rel="stylesheet" href="https://c...
用CSS实现康乐球 [动画演示] [#2持续更新中.....]
weixin_54679694的博客
01-17 270
CSSBattle #2 Carrom [动画演示] [持续更新中.....]题目图案（#2 Carrom）解决方案动画演示解决方案步骤Source Code CSSBattle 是一个使用 HTML 和 CSS 来实现目标图案，并实时预览和对比符合程度的网站。具有很高的趣味性和游戏性。 ​ 我仅仅选择实现图案 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。 ​ 题目图案（#2 Carrom） ​ 使用 HTML/CSS 实现以下图案。 ​ ​ 解决方案动画演示
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 528
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 253
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 889
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 996
react详细自我学习笔记，内容包括JSX、Redux、Router等
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 184
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
vue-awesome-swiper自动轮播可以同时显示3张图片
05-12
是的，vue-awesome-swiper可以通过设置slidesPerView属性来控制同时显示多少张图片。以下是一个示例代码： ``` <template> <swiper :options="swiperOption"> <swiper-slide v-for="(item, index) in list" :key="index"> <img :src="item.imgUrl" alt=""> </swiper-slide> </swiper> </template> <script> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return { list: [ { imgUrl: 'https://picsum.photos/id/1018/400/300' }, { imgUrl: 'https://picsum.photos/id/1015/400/300' }, { imgUrl: 'https://picsum.photos/id/1019/400/300' }, { imgUrl: 'https://picsum.photos/id/1020/400/300' }, { imgUrl: 'https://picsum.photos/id/1021/400/300' } ], swiperOption: { loop: true, autoplay: { delay: 3000 }, slidesPerView: 3, // 设置同时显示3张图片 spaceBetween: 30 } } } } </script> ``` 在上述代码中，我们通过设置slidesPerView属性为3来控制同时显示3张图片。同时，我们还设置了循环播放和自动播放等其他选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值