輪播圖&煙花效果

輪播圖
- 思路
- - 1.HTML代碼
  - 2.CSS代碼
  - 3.JS代碼
  - 效果
煙花效果
- 思路
- - 代碼
  - 效果

輪播圖

思路

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);
}

效果

2020-09-14---js案例（輪播圖&煙花效果）輪播圖煙花效果

煙花效果

思路

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>

效果

2020-09-14---js案例（輪播圖&煙花效果）輪播圖煙花效果

2020-09-14---js案例（輪播圖&煙花效果）輪播圖煙花效果

輪播圖&煙花效果

輪播圖

思路

1.HTML代碼

2.CSS代碼

3.JS代碼

效果

煙花效果

思路

代碼

效果

繼續閱讀

【每日一練】59—寫一個中秋月餅的響應式卡片

TextView 使用HTML标簽

閑聊HTML5的新特性HTML5

html5适配ios的黑暗模式

04 IDEA注冊碼：http://lookdiv.com/

uni-app實作訂單支付倒計時，不會随着傳回重新計時uni-app實作訂單支付倒計時

13個常用的JavaScript代碼片段

股票型基金買賣方法

html中＜dt＞＜/dt＞與＜dd＞＜/dd＞的差別

Vue學習記錄--使用ref擷取DOM元素群組件引用

PAT (Advanced Level) Practise 1042 Shuffling Machine (20)

淺析H5新增的Webworker對象

React+Umi 的H5 小程式公用跳轉 H5小程式路由帶參

微信小程式的開發與h5有什麼關系

實戰h5頁面跳轉到小程式

H5測試點

2020-09-14---js案例（輪播圖&amp;煙花效果）輪播圖煙花效果

輪播圖&煙花效果

輪播圖

思路

1.HTML代碼

2.CSS代碼

3.JS代碼

效果

煙花效果

思路

代碼

效果

繼續閱讀

2020-09-14---js案例（輪播圖&煙花效果）輪播圖煙花效果