2020-09-14---js案例（轮播图&烟花效果）

最新推荐文章于 2023-02-13 21:27:28 发布
最新推荐文章于 2023-02-13 21:27:28 发布
阅读量184 收藏
点赞数
分类专栏： H5
本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。
本文链接：https://blog.csdn.net/qq_45021462/article/details/108587062
版权

轮播图&烟花效果

轮播图

思路

/*
轮播：
核心： 当前下标
方式：大图 display 小圆点 backgroundColor
属性：
1. 获取大盒子
2. 获取大图（ul_li)
3. 计算大图数量
4. 创建并返回所有的小圆点 = 补全页面()
5. 获取左按钮
6. 获取右按钮
7. 当前下标 = 0
8. 添加事件()
9. 获取文字信息框
10. 调用轮播
//方法
1. 补全页面
1> 左按钮
1… 创建span
2… 添加内容 <
3… 添加id
4… 添加到大盒子中
2> 右按钮
1… 创建span
2… 添加内容 >
3… 添加id
4… 添加到大盒子中
3> 文字信息框
1… 创建div
2… 添加id
3… 添加到大盒子中
4> 小圆点 ol li
1… 创建ol
2… 创建一个空数组
3… 创建li
4… 将li添加到ol中
5… 将li添加到数组中
6… 将ol添加到大盒子中
返回数组;
2. 添加事件–改变当前下标
1》 左按钮 – 点击 — 当前下标–
if(当前下标 === -1){
当前下标 = length - 1
}
调用轮播
2》 右按钮 – 点击 — 当前下标 ++
if(当前下标 === length){
当前下标 = 0
}
调用轮播
3》小圆点 – 移入
当前下标 = 移入的下标
调用轮播
3. 切换图片
1. 大图
所有大图-- none
当前大图— block
2. 小圆点
所有小圆点—red
当前小圆点–blue
文字信息 = 当前大图.第一个元素子节点.第一个元素子节点.alt
4. 自动轮播
计时器 == 3000
当前下标 ++
if(当前下标 === length){
当前下标 = 0
}
调用轮播
大盒子=== 移入事件 === 清除计时器
大盒子=移出事件===开始自动轮播
*/

1.HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div id="slide1" class="container">
			<ul>
				<li><a href="http://www.1000phone.com"><img src="img/1.jpg" alt="文字1"/></a></li>
				<li><a href="http://www.1000phone.com"><img src="img/2.jpg" alt="文字2"/></a></li>
				<li><a href="http://www.1000phone.com"><img src="img/3.jpg" alt="文字3"/></a></li>
				<li><a href="http://www.1000phone.com"><img src="img/4.jpg" alt="文字4"/></a></li>
			</ul>
		</div>
		<script type="text/javascript">
			
			var s = new Slider("#slide1");
			console.info(s);
		</script>
	</body>
</html>

2.CSS代码

ul,ol,li{
	padding: 0;
	margin: 0;
	list-style: none;
}
.container{
	width: 500px;
	height: 300px;
	margin: 50px auto;
	position: relative;
}
#msg{
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-indent: 10px;
	position: absolute;
	bottom: 0px;
	left: 0;
	color: white;
	font-size: 16px;
	background: rgba(0,0,0,.8);
	cursor: pointer;
	z-index: 1;
}
ul li a {
	display: block;
}
img{
	width: 500px;
	height: 300px;
}
ol{
	position: absolute;
	bottom: 10px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	background: rgba(255,255,255,.6);
	border-radius: 7px;
	padding: 3px;
	z-index: 2;
}
ol li{
	background: red;
	float: left;
	width: 8px;
	height: 8px;
	margin-left: 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	margin-right: 7px;
}
span{
	width: 30px;
	height: 45px;
	line-height: 45px;
	font-size: 40px;
	color: white;
	background: rgba(255,255,255,.3);
	cursor: pointer;
	position: absolute;
	font-weight: bold;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transition: all 1s ease 0s;
}
#rtBtn{
	right: 0;
	left: auto;
}
span:hover{
	-webkit-transform: rotateY(40deg) translateX(-3px) scale(1.2);
}

3.JS代码

/*
    轮播：
    核心： 当前下标
    方式：大图 display   小圆点  backgroundColor


    属性：
    1. 获取大盒子
    2. 获取大图（ul_li)
    3. 计算大图数量
    4. 创建并返回所有的小圆点 = 补全页面()
    5. 获取左按钮
    6. 获取右按钮
    7. 当前下标 = 0
    8. 添加事件()
    9. 获取文字信息框
    10. 调用轮播


    //方法
    1. 补全页面
        1> 左按钮
            1..  创建span
            2..  添加内容   &lt;
            3..  添加id
            4..  添加到大盒子中
        2> 右按钮
            1.. 创建span
            2.. 添加内容  &gt;
            3.. 添加id
            4.. 添加到大盒子中
        3> 文字信息框
            1.. 创建div
            2.. 添加id
            3.. 添加到大盒子中
        4> 小圆点 ol  li
            1.. 创建ol
            2.. 创建一个空数组
            3.. 创建li
            4.. 将li添加到ol中
            5.. 将li添加到数组中
            6.. 将ol添加到大盒子中
        返回数组;
    2. 添加事件--改变当前下标
        1》 左按钮 -- 点击 --- 当前下标--
            if(当前下标 === -1){
                当前下标 = length - 1
            }
            调用轮播
        2》 右按钮 -- 点击 --- 当前下标 ++
            if(当前下标 === length){
                当前下标 = 0
            }
            调用轮播
        3》小圆点 -- 移入
            当前下标 = 移入的下标
            调用轮播
    3. 切换图片
        1. 大图
            所有大图-- none
            当前大图--- block
        2. 小圆点
            所有小圆点---red
            当前小圆点--blue
            文字信息 = 当前大图.第一个元素子节点.第一个元素子节点.alt

    4. 自动轮播
        计时器 == 3000
            当前下标 ++
            if(当前下标 === length){
                当前下标 = 0
            }
            调用轮播

        大盒子=== 移入事件 === 清除计时器
        大盒子===移出事件=====开始自动轮播
*/

class Slider{
    constructor(selector){
        //属性
        // 1. 获取大盒子
        this.big_box = $('div');
        // console.log(big_box);
        // 2. 获取大图（ul_li)
        this.big_img = this.big_box.children[0].children;
        // 3. 计算大图数量
        this.num = this.big_img.length;
        // 4. 创建并返回所有的小圆点 = 补全页面()
        this.sml_cir = this.addEle();
        // 5. 获取左按钮
        this.lt_btn = $('#ltBtn');
        // 6. 获取右按钮
        this.gt_btn = $('#rtBtn');
        // 7. 当前下标 = 0
        this.index_cur = 0;
        // 8. 添加事件()
        this.addEvent();
        // 9. 获取文字信息框
        this.o_div = $('#msg');
        // 10. 调用轮播
        this.slider();
        // 11. 计时器返回值
        this.timer = null;
        // 12. 调用自动轮播
        this.autoPlay();
    }
    addEle(){
        // 1. 补全页面
        // 1> 左按钮
        //     1..  创建span
        let lt_btn = document.createElement('span');
        //     2..  添加内容   &lt;
        lt_btn.innerHTML = '&lt;';
        //     3..  添加id
        lt_btn.id = 'ltBtn';
        //     4..  添加到大盒子中
        this.big_box.appendChild(lt_btn);
        // 2> 右按钮
        //     1.. 创建span
        let gt_btn = document.createElement('span');
        //     2.. 添加内容  &gt;
        gt_btn.innerHTML = '&gt;';
        //     3.. 添加id
        gt_btn.id = 'rtBtn';
        //     4.. 添加到大盒子中
        this.big_box.appendChild(gt_btn);
        // 3> 文字信息框
        //     1.. 创建div
        let o_div = document.createElement('div');
        //     2.. 添加id
        o_div.id = 'msg';
        //     3.. 添加到大盒子中
        this.big_box.appendChild(o_div);
        // 4> 小圆点 ol  li
        //     1.. 创建ol
        let ol = document.createElement('ol');
        //     2.. 创建一个空数组
        let arr = [];
        //     3.. 创建li
        //     4.. 将li添加到ol中
        for(let i = 0,len = this.num;i < len;i ++){
            let li = document.createElement('li');
            ol.appendChild(li);
        //     5.. 将li添加到数组中
            arr.push(li);
            // console.log(arr);
        }
        //     6.. 将ol添加到大盒子中
        this.big_box.appendChild(ol);
        // 返回数组;
        return arr;
    }
    addEvent(){
        // 2. 添加事件--改变当前下标
        // 1》 左按钮 -- 点击 --- 当前下标--
        //     if(当前下标 === -1){
        //         当前下标 = length - 1
        //     }
        //     调用轮播
        this.lt_btn.onclick = function(){
            this.index_cur --;
            if(this.index_cur === -1){
                this.index_cur = num - 1;
            }
            this.slider();
        }.bind(this);
        // 2》 右按钮 -- 点击 --- 当前下标 ++
        //     if(当前下标 === length){
        //         当前下标 = 0
        //     }
        //     调用轮播
        this.gt_btn.onclick = function(){
            this.index_cur ++;
            if(this.index_cur === this.num){
                this.index_cur = 0;
            }
            this.slider();
        }.bind(this);
        // 3》小圆点 -- 移入
        //     当前下标 = 移入的下标
        //     调用轮播
        for(let i = 0;i < this.num;i ++){
            this.sml_cir[i].onmouseenter = function(){
                this.index_cur = i;
                this.slider();
            }.bind(this);
        }
        
    }
    slider(){
        // 3. 切换图片
        // 1. 大图
        //     所有大图-- none
        //     当前大图--- block
        // 2. 小圆点
        //     所有小圆点---red
        //     当前小圆点--blue
        //     文字信息 = 当前大图.第一个元素子节点.第一个元素子节点.alt
        for(let i = 0;i < this.num;i ++){
            //所有大图隐藏
            this.big_img[i].style.display = 'none';
            //所有小圆点默认红色
            this.sml_cir[i].style.background = 'red';
        }
        //当前大图出现
        this.big_img[this.index_cur].style.display = 'block';
        // 当前小圆点变为蓝色
        this.sml_cir[this.index_cur].style.background = 'blue';
        //显示当前文本信息
        this.o_div.innerText = this.big_img[this.index_cur].firstElementChild.firstElementChild.alt;
    }
    autoPlay(){
    // 4. 自动轮播
    // 计时器 == 3000
    //     当前下标 ++
    //     if(当前下标 === length){
    //         当前下标 = 0
    //     }
    //     调用轮播

        this.timer = setInterval(() => {
            this.index_cur ++;
            if(this.index_cur === this.num){
                this.index_cur = 0;
            }
            this.slider();
        }, 3000);
    // 大盒子=== 移入事件 === 清除计时器
    // 大盒子===移出事件=====开始自动轮播
        this.big_box.onmouseenter = function(){
            clearInterval(this.timer);
        }.bind(this);
        this.big_box.onmouseleave = function(){
            this.autoPlay();
        }.bind(this);
    }
    
}

function $(selector){
    return document.querySelector(selector);
}

效果

在这里插入图片描述

烟花效果

思路

/*
document === 点击事件 ==== 获取鼠标的坐标值

        1. 火花
            创建火花
            添加类名
            添加到页面
            定位坐标值
                left = 鼠标.x
                top = document.documentElement.clientHeight - 50
            向上运动（运动框架）
                结束==火花消失==爆炸

        2. 爆炸
            1. 计算碎片数量
            2. 通过数量创建对烟花

        3. 封装类
            class Spark{
                constructor(鼠标坐标){
                    //属性
                    this.坐标 = 鼠标坐标
                    //初始化方法
                    this.init();
                }
                方法
                init(){
                    //1. 创建烟花
                    //2. 添加到页面
                    //3. 设置坐标值
                    //4. 设置颜色
                    //5. 设置大小
                    //6. 设置速度（x,y)
                    //烟花运动
                }
                sport(){
                    计时器
                        烟花.style.left = 
                        烟花.style.top = 
                        if(烟花落地){
                            烟花消失
                            计时器停止
                        }
                }
            }
    */

代码

<!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>
        body{
            background: black;
        }
        .fire{
            width: 10px;
            height: 10px;
            background: white;
            position: absolute;
        }

    </style>
</head>
<body>
    
    <script src="js/sport.js"></script>
    <script>
        /*
            document === 点击事件  ==== 获取鼠标的坐标值

            1. 火花
                创建火花
                添加类名
                添加到页面
                定位坐标值
                    left = 鼠标.x
                    top = document.documentElement.clientHeight - 50
                向上运动（运动框架）
                    结束==火花消失==爆炸

            2. 爆炸
                1. 计算碎片数量
                2. 通过数量创建对烟花

            3. 封装类
                class Spark{
                    constructor(鼠标坐标){
                        //属性
                        this.坐标 = 鼠标坐标
                        //初始化方法
                        this.init();
                    }
                    方法
                    init(){
                        //1. 创建烟花
                        //2. 添加到页面
                        //3. 设置坐标值
                        //4. 设置颜色
                        //5. 设置大小
                        //6. 设置速度（x,y)
                        //烟花运动
                    }
                    sport(){
                        计时器
                            烟花.style.left = 
                            烟花.style.top = 
                            if(烟花落地){
                                烟花消失
                                计时器停止
                            }
                    }
                }
        */
        document.onclick = function(evt){
            let e = evt || window.event;
            fnFire({x : e.pageX,y : e.pageY});
        }
        //创建火花
        function fnFire(target){
            //1. 创建
            let div = document.createElement('div');
            //2. 添加类名
            div.className = 'fire';
            //3. 添加到页面
            document.body.appendChild(div);
            //4. 定位坐标
            div.style.left = target.x + 'px';
            div.style.top = document.documentElement.clientHeight - 50 + 'px';
            sport_14(div,{top : target.y},()=>{
                //消失
                div.remove(target);
                //调用爆炸
                boom(target);
            })
        }

        function boom(target){
            //数量
            this.num = randomInt(50,80);
            for(let i = 0;i < this.num;i ++){
                new Spark(target);
            }
        }
        function randomInt(min,max){
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        class Spark{
            constructor(target){
                this.target = target;
                this.init();
            }
            init(){
                 //1. 创建烟花
                 this.ele = document.createElement('div');
                        //2. 添加到页面
                document.body.appendChild(this.ele);
                        //3. 设置坐标值
                this.ele.style.position = 'absolute';
                this.ele.style.left = this.target.x + 'px';
                this.ele.style.top = this.target.y + 'px';
                        //4. 设置颜色
                this.ele.style.background = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
                        //5. 设置大小
                this.ele.style.width = randomInt(5,10) + 'px';
                this.ele.style.height = randomInt(5,10) + 'px';
                        //6. 设置速度（x,y)
                this.speed_x = Math.random()  >= 0.5 ? randomInt(5,10) : -randomInt(5,10);
                this.speed_y = Math.random()  >= 0.5 ? randomInt(5,10) : -randomInt(5,10);
                        //烟花运动
                this.sport();
            }
            sport(){
                this.timer = setInterval(() => {
                    this.ele.style.left = this.ele.offsetLeft + this.speed_x + 'px';
                    this.ele.style.top = this.ele.offsetTop + this.speed_y ++ + 'px';
                    if(this.ele.offsetTop >= document.documentElement.clientHeight){
                        this.ele.remove();
                        clearInterval(this.timer);
                    }
                }, 30);
            }
        }
    </script>
</body>
</html>

效果

在这里插入图片描述

易de
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现烟花效果代码.rar
11-23
js实现的烟花效果，使用鼠标点击页面查看烟花爆炸效果
烟花晚霞星空特效-vue
泡椒猪肝的博客
01-29 4363
效果图： 晚霞星空效果图-vue： 源代码: &lt;template&gt; &lt;div class="body"&gt; &lt;div class="stars" ref="starsRef"&gt; &lt;div class="star" v-for="(item, index) in starsCount" :key="index"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;scri
鼠标点击小烟花特效
lw2309485575的博客
03-10 3026
鼠标点击小烟花特效 介绍 鼠标点击出现小烟花特效 在线演示 https://murenziwei.github.io/lw_firewords/index.html 源码Git地址 Gitee: https://gitee.com/murenziwei/lw_firewords.git Github: https://github.com/murenziwei/lw_firewords.git 主...
❤ ❤WEB前端--canvas绚丽烟花特效❤ ❤
yingshuangtu的博客
09-15 1208
一、实现效果 二、代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt
vue 新年倒计时+准点烟花特性
鹤渺的星球
01-07 1353
新年倒计时和准点烟花。
跨年烟花代码-2023跨年烟花代码
12-11
在 JavaScript 部分，我们可以看到一个名为 `Boom` 的对象，该对象用于生成烟花动画效果。在这里，我们可以看到 `Boom` 对象的构造函数，用于生成烟花对象的初始状态。 在 `Boom` 对象中，我们可以看到 `x` 和 `y` ...
春节主题-基于Vue实现的春节烟花网页代码含抽奖活动.zip
最新发布
02-18
春节主题-基于Vue实现的春节烟花网页代码含抽奖活动.zip春节主题-基于Vue实现的春节烟花网页代码含抽奖活动.zip春节主题-基于Vue实现的春节烟花网页代码含抽奖活动.zip春节主题-基于Vue实现的春节烟花网页代码含抽奖...
swift-Fireworks-为UIView添加烟花动画效果
08-15
&quot;swift-Fireworks-为UIView添加烟花动画效果&quot;这个项目就是这样一个例子，它展示了如何在Swift中创建逼真的烟花绽放效果。 首先，我们需要了解`UIView`的基本概念。`UIView`是iOS应用中可视化元素的基础，它可以包含...
行业文档-设计装置-纸制折叠烟花望远镜.zip
08-20
《纸制折叠烟花望远镜》是一份详细的设计文档，主要涵盖了如何利用纸质材料制作一款创新的、可折叠的烟花望远镜。这份文档对于理解工艺设计、结构工程以及艺术创作有着重要的价值，尤其适用于教育、手工艺品制作和...
行业文档-设计装置-纸制单筒烟花望远镜.zip
08-20
《纸制单筒烟花望远镜》是一款独特的创新设计，结合了传统烟花的视觉效果与望远镜的观察功能，为娱乐活动增添了新的趣味性。这个设计装置将烟火的美丽瞬间与科技元素相结合，旨在提供一种全新的观赏体验，让人们在...
新年快乐! javascript实现超级炫酷的3D烟花特效
01-21
本文实例为大家分享了javascript实现3D烟花特效的具体代码，供大家参考，具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset=utf-8&gt; &lt;title&gt;3D烟花&lt;/title&gt; &lt;style&gt; html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #canvas{ width:100%; height:100%; }
使用vue做一个烟花
weixin_35751194的博客
02-13 1236
使用 Vue.js 制作烟花效果需要使用到 HTML5 Canvas 技术和动画技巧。你可以通过在 Vue 组件中使用 canvas 元素，并通过 JavaScript 代码在 canvas 上绘制各种图形，来实现烟花效果。在 Vue 中，你还可以通过使用计算属性、侦听器等功能，来动态地控制烟花效果的外观和行为。 简而言之，使用 Vue 制作烟花效果需要结合前端技术、动画技巧和代码实现，不是一件简...
vue js樱花飘落背景特效
if's Blog
11-26 1万+
vue js实现鼠标点击小烟花特效和全局背景樱花飘落特效 先上效果图
原生JS实现网页烟花动画效果——前端工程师必备技能！
李帅醒的博客
11-12 1万+
原生js实现放烟花效果，点击鼠标，然后向四周扩散，最后自由落体效果！最简单的方法实现！
Python 程序的输出 | 第一套
努力是为了站在万人之中，成为别人的光
03-06 3万+
预测以下 python 程序的输出： 程序一： r = lambda q: q * 2 s = lambda q: q * 3 x = 2 x = r(x) x = s(x) x = r(x) print (x) 输出： 24 解释： 在上述程序中，r 和 s 是 lambda 函数或匿名函数，q 是这两个函数的参数。在第一步中，我们将 x 初始化为 2。在第二步中，我们将 x 作为参数传递给 lambda 函数 r，这将返回存储在 x 中的 x*2。也就是说，现在 x = 4。同样，在第三步中，我们将
新年快乐！使用js来实现一个好玩的烟花效果
就是不减肥
12-27 2191
新年快乐！使用js来实现一个好玩的烟花效果 这个烟花效果是基于js以及canvas来实现的，马上临近过年，也来应个景！ 话不多说，直接上代码！！！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;meta char...
canvas 烟花
江湖再见
04-14 1591
canvas 烟花 /* basic styles for black background and crosshair cursor */ body { background: #000; margin: 0; } canvas { cursor: crosshair; display: block; } Canvas is not supported in your browser.
通过js做出一个烟花效果（详细步骤）
weixin_43797492的博客
03-04 4913
相信大家都见过烟花或者说是放过烟花，一个烟花点燃后在天空中炸出，想想就很酷，还有更酷的呢。接下来我来带着大家做一件更酷的事情，我们通过js来完成一个烟花的效果。 首先我们来在页面上描绘出一个夜晚的场景： &lt;style type="text/css"&gt; css部分 #container{ width: 80%; height: 600px; margin: ...
(精华)2020年7月3日 JavaScript高级篇 ES6(新增的实例方法)
热门推荐
时光隧道
07-03 56万+
新增的实例方法 includes() ，startsWith() ，endsWith() // includes()返回布尔值 startsWith() endsWith() let s = 'hello world' console.log(s.includes('o')); console.log(s.includes('p')); console.log(s.startsWith('hello')); console.log(s.endsWith('world')); // 支持第二个参数 表示开
MR-JE-C技术资料集：安全操作与故障排除指南
禁止行为如&quot;严禁烟火&quot;，强制行为如设备必须接地，这些都要求用户严格遵守。 文档详细讲述了防止触电和防止伤害的措施。例如，进行接线作业或检查前，必须关闭电源至少15分钟，并确保充电指示灯熄灭，以消除触电风险...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值