2020-09-15---js实现购物车&轮播图

最新推荐文章于 2020-11-22 19:18:10 发布

易de

最新推荐文章于 2020-11-22 19:18:10 发布

阅读量693

点赞数

分类专栏： H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/108598286

版权

H5 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

购物车&轮播图

购物车
- 思想
轮播图
- 思想

购物车

思想

/*
一、查看购物车-- 点击事件–跳转页面
二、购买 ==== 点击事件
1. 获取购物车页面所需要的商品信息（id/name/price/num)
let good_id = …;
let good_name = ‘…’
2. localStorage = ‘key’ ‘value’
‘key’ ‘product_’ + 商品id
‘value’
‘{“id” : 1,“name” : “水杯”,“price” : 29,“num” : 1}’
'{“id” : ’ + good_id + ‘,“name” : "’ + good_name + '",“price” : ’ + good_price + ',“num” : ’ + num + ‘}’
{"id" : ${good_id},"name" : "${good_name}","price" : ${good_price},"num" : ${num}}
window.localStorage.setItem(‘product_’ + good_id,{"id" : ${good_id},"name" : "${good_name}","price" : ${good_price},"num" : ${num}})
*/

轮播图

思想

/*
属性：
1. 获取大盒子
2. 获取左遮罩
3. 获取右遮罩
4. 获取左按钮
5. 获取右按钮
6. 获取所有的大图li
7. 获取小图ul
8. 获取所有小图li
9. 当前下标
10. 计时器返回值
11. 改变层级的变量
方法：
添加事件
1. 左遮罩–移入–左按钮显示
2. 右遮罩–移入–右按钮显示
3. 左遮罩–移出–左按钮消失
4. 右遮罩–移出–右按钮消失
5. 左按钮–点击–改变当前下标（
当前下标 --;
if(当前下标 === -1){
当前下标= length - 1
}
）–调用轮播
6. 右按钮–点击–改变当前下标（
当前下标 ++
if(当前下标 === length){
当前下标 = 0
}
）调用轮播
7. 所有小图li
1. 移入事件
透明度 — 1
2. 移出事件
if(当前下标！== 移入事件){
透明度 == 0.5
}
3. 单击事件
当前下标 = 鼠标所在小图的下标
调用轮播
轮播：
大图[当前下标].style.zIndex = ++ 层级变量;
小图：
if(当前下标 === 0){
小图ul left 0
}else if(当前下标 === length - 1){
小图ul left - (length - 3) * 单张小图的宽度
}else{
小图ul left -(当前下标 - 1) * 单张小图的宽度
}
//初始化小图透明度
//所有小图透明度 50
遍历小图
透明度 50
当前小图透明度 100
*/

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			body{
				background: #CCCCCC;
			}
			#box{
				width: 400px;
				margin: 50px auto;
				height: 426px;
				overflow: hidden;
				border: 1px solid yellow;
			}
			#top{
				position: relative;
				height: 320px;
				
			}
			#top li{
				position: absolute;
				top: 0;
				left: 0;
			}
			#left{
				position: absolute;
				width: 200px;
				top: 0;
				left: 0;
				height: 320px;
				z-index: 1000;
				/* background: yellow; */
			}
			#right{
				position: absolute;
				width: 200px;
				height: 320px;
				top: 0;
				right: 0;
				z-index: 1000;
				/* background: red; */
			}
			#btn_l{
				position: absolute;
				background: url(img/btn.gif) no-repeat;
				height: 60px;
				width: 60px;
				left: 10px;
				top: 130px;
				z-index: 1001;
				opacity: 0;
				filter: alpha(opacity=0);
			}
			#btn_r{
				position: absolute;
				background: url(img/btn.gif) no-repeat 0 -60px;
				height: 60px;
				width: 60px;
				right: 10px;
				top: 130px;
				z-index: 1001;
				opacity: 0;
				filter: alpha(opacity=0);
			}
			#bottom{
				position: relative;
				
			}
			#small_ul{
				position: absolute;
				top: 0;
				left: 0;
			}
			#small_ul li{
				float: left;
			}
			#small_ul img{
				height: 90px;
				width: 120px;
				padding: 6px;
			}
		</style>
		
	</head>
	<body>
		<div id="box">
			<ul id="top">
				<div id="left"></div>
				<div id="right"></div>
				<a href="javascript:;" id="btn_l"></a>
				<a href="javascript:;" id="btn_r"></a>
				<li style="z-index: 1 ";><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
				<li><img src="img/6.jpg"/></li>
			</ul>
			<div id="bottom">
				<ul id="small_ul">
					<li><img src="img/1.jpg"/></li>
					<li><img src="img/2.jpg"/></li>
					<li><img src="img/3.jpg"/></li>
					<li><img src="img/4.jpg"/></li>
					<li><img src="img/5.jpg"/></li>
					<li><img src="img/6.jpg"/></li>
				</ul>
			</div>
		</div>
		<script src="js/sport.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>

js


/*
    属性：
    1. 获取大盒子
    2. 获取左遮罩
    3. 获取右遮罩
    4. 获取左按钮
    5. 获取右按钮
    6. 获取所有的大图li
    7. 获取小图ul
    8. 获取所有小图li
    9. 当前下标
    10. 计时器返回值
    11. 改变层级的变量

    ？？？
    方法：
    添加事件
        1. 左遮罩--移入--左按钮显示
        2. 右遮罩--移入--右按钮显示
        3. 左遮罩--移出--左按钮消失
        4. 右遮罩--移出--右按钮消失
        5. 左按钮--点击--改变当前下标（
            当前下标 --;
            if(当前下标 === -1){
                当前下标= length - 1
            }
            ）--调用轮播
        6. 右按钮--点击--改变当前下标（
            当前下标 ++
            if(当前下标 === length){
                当前下标 = 0
            }
            ）调用轮播

        7. 所有小图li
            1. 移入事件
                透明度 --- 1
            2. 移出事件
                if(当前下标 ！== 移入事件){
                    透明度 == 0.5
                }
            3. 单击事件
                当前下标 = 鼠标所在小图的下标
                调用轮播
    轮播：
        大图[当前下标].style.zIndex = ++ 层级变量;
        小图：
        if(当前下标 === 0){
            小图ul left 0
        }else if(当前下标 === length - 1){
            小图ul left  - (length - 3) * 单张小图的宽度
        }else{
            小图ul  left -(当前下标 - 1) * 单张小图的宽度
        }
        //初始化小图透明度
        //所有小图 透明度 50
        遍历小图
        透明度  50
        当前小图  透明度  100
*/

class Slider{
    constructor(){
        // 属性：
        // 1. 获取大盒子
        this.big_box = $('#box');
        // 2. 获取左遮罩
        this.left = $('#left');
        // 3. 获取右遮罩
        this.right = $('#right');
        // 4. 获取左按钮
        this.lt_btn = $('#btn_l');
        // 5. 获取右按钮
        this.rt_btn = $('#btn_r');
        // 6. 获取所有的大图li
        this.big_li = document.querySelectorAll('#top li');
        // 7. 获取小图ul
        this.small_ul = $('#small_ul');
        // 8. 获取所有小图li
        this.small_li = document.querySelectorAll('#bottom li');
        // 9. 当前下标
        this.index_cur = 0;
        // 10. 计时器返回值
        this.timer = null;
        // 11. 改变层级的变量
        this.z_index = 1;
        // 给小图 ul 设置宽度
        this.small_ul.style.width = this.small_li.length * this.small_li[0].offsetWidth + 'px';

        //事件
        this.addEvent();
        //轮播
        this.init();
    }
    init(){
        // 轮播：
        // 大图[当前下标].style.zIndex = ++ 层级变量;
        this.big_li[this.index_cur].style.zIndex = ++ this.z_index;
        // 小图：
        // if(当前下标 === 0){
        //     小图ul left 0
        // }else if(当前下标 === length - 1){
        //     小图ul left  - (length - 3) * 单张小图的宽度
        // }else{
        //     小图ul  left -(当前下标 - 1) * 单张小图的宽度
        // }
        if(this.index_cur === 0){
            sport(this.small_ul,{left : 0});
        }else if(this.index_cur === this.small_li.length - 1){
            sport(this.small_ul,{left : -(this.small_li.length - 3) * this.small_li[0].offsetWidth})
        }else{
            sport(this.small_ul,{left : -(this.index_cur - 1) * this.small_li[0].offsetWidth});
        }
        // //初始化小图透明度
        // //所有小图 透明度 50
        // 遍历小图
        // 透明度  50
        // 当前小图  透明度  100
        for(let i = 0,len = this.small_li.length;i < len;i ++){
            sport(this.small_li[i],{opacity : 50});
        }
        sport(this.small_li[this.index_cur],{opacity : 100});
    }
    addEvent(){
        // 1. 左遮罩和左按钮--移入--左按钮显示
        this.left.onmouseenter = this.lt_btn.onmouseenter = function(){
            sport(this.lt_btn,{opacity : 100})
        }.bind(this);
        // 2. 右遮罩--移入--右按钮显示
        this.right.onmouseenter = this.rt_btn.onmouseenter = function(){
            sport(this.rt_btn,{opacity : 100})
        }.bind(this);
        // 3. 左遮罩--移出--左按钮消失
        this.left.onmouseleave = function(){
            sport(this.lt_btn,{opacity : 0})
        }.bind(this);
        // 4. 右遮罩--移出--右按钮消失
        this.right.onmouseleave = function(){
            sport(this.rt_btn,{opacity : 0})
        }.bind(this);
        // 5. 左按钮--点击--改变当前下标（
        //     当前下标 --;
        //     if(当前下标 === -1){
        //         当前下标= length - 1
        //     }
        //     ）--调用轮播
        this.lt_btn.onclick = function(){
            this.index_cur --;
            if(this.index_cur === -1){
                this.index_cur = this.small_li.length - 1;
            }
            //调用
            this.init();
        }.bind(this);
        // 6. 右按钮--点击--改变当前下标（
        //     当前下标 ++
        //     if(当前下标 === length){
        //         当前下标 = 0
        //     }
        //     ）调用轮播
        this.rt_btn.onclick = function(){
            this.index_cur ++;
            if(this.index_cur === this.small_li.length){
                this.index_cur = 0;
            }
            //调用
            this.init();
        }.bind(this);
        // 7. 所有小图li
        //     1. 移入事件
        //         透明度 --- 1
        //     2. 移出事件
        //         if(当前下标 ！== 移入事件){
        //             透明度 == 0.5
        //         }
        //     3. 单击事件
        //         当前下标 = 鼠标所在小图的下标
        //         调用轮播

        let that = this;
        for(let i = 0,len = this.small_li.length;i < len;i ++){
            this.small_li[i].onmouseenter = function(){
                sport(this,{opacity : 100});
            }
            this.small_li[i].onmouseleave = function(){
                if(that.index_cur !== i){
                    sport(this,{opacity : 50});
                }
            }
            this.small_li[i].onclick = function(){
                this.index_cur = i;
                //调用
                this.init();
            }.bind(this);
        }
    }
}

new Slider();

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

function getStyle(obj,attr){
    return window.getComputedStyle ? getComputedStyle(obj,1)[attr] : obj.currentStyle[attr];
}
function sport(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
        let flag = true;
        for(let attr in json){
            let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
            let speed = (json[attr] - cur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(cur !== json[attr]){
                flag = false;
            }
            if(attr === 'opacity'){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';
            }else{
                obj.style[attr] = cur + speed + 'px';
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn instanceof Function){
                fn();
            }
        }
    }, 30);
}

效果

在这里插入图片描述

易de

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
2020-09-15---js实现购物车&轮播图

购物车&轮播图购物车思想轮播图购物车思想/*一、查看购物车-- 点击事件–跳转页面二、购买 ==== 点击事件1. 获取购物车页面所需要的商品信息（id/name/price/num)let good_id = …;let good_name = ‘…’2. localStorage = ‘key’ ‘value’‘key’ ‘product_’ + 商品id‘value’‘{“id” : 1,“name” : “水杯”,“price” : 29,“num” :
复制链接

扫一扫