master

分支 (1)

管理

管理

master

my-first-item
/
index.html

<!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>华为商城VMALL-华为手机、笔记本、平板、穿戴、官网正品保障</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/tool.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="icon" href="./picture/favicon.ico">
</head>
<body>
    <div class="header out">
        <div class="headin" id="top">
            <div class="headleft">
                <ul class="left-head">
                    <li><a href="">首页</a></li>
                    <li><a href="">华为商城</a></li>
                    <li><a href="">花粉俱乐部</a></li>
                    <li><a href="">V码(优购码)</a></li>
                    <li><a href="">企业购</a></li>
                    <li><a href="">Select Region</a></li>
                </ul>
                <div class="more"><a href="">更多精彩&nbsp;&nbsp;∨</a>
                    <div class="more-below">
                        <ul>
                            <li><a href="">HaemonyOS</a></li>
                            <li><a href="">应用市场</a></li>
                            <li><a href="">华为终端云空间</a></li>
                            <li><a href="">开发者联盟</a></li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="headright">
                <ul class="right-head">
                    <li><a href="">请登录</a></li>
                    <li><a href="">注册</a></li>
                    <li><a href="">我的订单</a></li>
                </ul>
                <div class="else el1"><a href="">客户服务 ∨</a>
                    <div class="custom-below">
                        <ul>
                            <li><a href="">客服中心</a></li>
                            <li><a href="">联系客服</a></li>

                        </ul>
                    </div></div>
                <div class="else el2"><a href="">网站导航 ∨</a>
                    <div class="nav-below">
                        <span>正在加载中！！！</span>
                    </div>
                </div>
                <div class="else el3"><a href="">手机版 ∨</a>
                    <div class="phone-below">
                        <span>功能更新中</span>
                    </div>
                </div>
                <div class="buy-car"><a href=""><i class="fas fa-shopping-cart"></i>购物车</a>
                    <div class="buy-car-below">
                        <div class="buycar-text">
                            您的购物车里空空的呢！赶快选购把(#^.^#)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav-main out">
        <div class="nav-main-in">
            <div class="logo">
                <a href="">
                    <img src="./picture/logo.webp" alt="">
                </a>
            </div>
            <div class="nav-left">
                <ul>
                    <li><a href="" id="nav-fa">华为专区</a></li>
                    <li><a href="">全球甄选</a></li>
                    <li><a href="">华为智选</a></li>
                    <li><a href="">鸿蒙智联</a></li>
                    <li><a href="">HarmonyOS</a></li>
                </ul>
            </div>
            <div class="nav-right">

                   <input type="text" value="P50 nova 8" class="soutext">
                    <div class="soulogo">
                        <i class="fas fa-search"></i>
                    </div>
            </div>

        </div>
    </div>

    <div class="main ">
        <ul id="imglist">
            <li><a href="javascript:;"><img src="./picture/huawei1.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/huawei2.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/huawei3.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/huawei4.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/huawei5.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/huawei6.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/huawei1.webp" alt=""></a></li>
        </ul>
        <ul id="squar">
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </ul>
        <div class="leftjian">
            <i class="fas fa-angle-left"></i>
        </div>
        <div class="rightjian">
            <i class="fas fa-angle-right"></i>
        </div>
    </div>

    <div class="menu">
        <ul>
            <li><a href="javascript:;">手机 <span>></span></a></li>
            <li><a href="javascript:;">智慧屏 <span>></span></a></li>
            <li><a href="javascript:;">智能穿戴 <span>></span></a></li>
            <li><a href="javascript:;">耳机音箱 <span>></span></a></li>
            <li><a href="javascript:;">电脑 <span>></span></a></li>
            <li><a href="javascript:;">平板 <span>></span></a></li>
            <li><a href="javascript:;">智能路由 <span>></span></a></li>
            <li><a href="javascript:;">配件 <span>></span></a></li>
            <li><a href="javascript:;">生产产品 <span>></span></a></li>
            <li><a href="javascript:;">家用电器 <span>></span></a></li>
            <li><a href="javascript:;">美食酒饮 <span>></span></a></li>
            <li><a href="javascript:;">增值服务/企业商用 <span>></span></a></li>
            <div class="menu-right"></div>
        </ul>
    </div>
    <div class="goods out">
        <ul class="goods-logo">
            <li><a href="javascript:;">企业购</a></li>
            <li><a href="javascript:;">智能家居</a></li>
            <li><a href="javascript:;">以旧换新</a></li>
            <li><a href="javascript:;">教育商店</a></li>
            <li><a href="javascript:;">新品</a></li>
            <li><a href="javascript:;">会员专区</a></li>
            <li><a href="javascript:;">信息</a></li>
        </ul>
    </div>
    <div class="goods-one in">
        <ul>
            <li><a href="javascript:;"><img src="./picture/goodone1.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/goodone2.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/goodone3.webp" alt=""></a></li>
            <li><a href="javascript:;"><img src="./picture/goodone4.webp" alt=""></a></li>
        </ul>
    </div>
    <div class="goods-two in">
        <span>爆款推荐</span>
        <div class="goods-two-menu">
            <ul class="goodtwo-ulone">
                <li><a href="javascript:;"><img src="./picture/goodtwo1.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo1.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo2.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo3.png" alt=""></a></li>

            </ul>
            <ul class="goodtwo-ultwo">
                <li><a href="javascript:;"><img src="./picture/goodtwo4.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo5.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo6.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo7.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodtwo8.png" alt=""></a></li>

            </ul>
        </div>
    </div>


    <div class="goods-two in">
        <span>生态精品</span>
        <div class="goods-two-menu">
            <ul class="goodtwo-ulone">
                <li><a href="javascript:;"><img src="./picture/goodthree1.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree1.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree2.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree3.png" alt=""></a></li>

            </ul>
            <ul class="goodtwo-ultwo">
                <li><a href="javascript:;"><img src="./picture/goodthree4.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree5.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree6.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree7.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodthree8.png" alt=""></a></li>

            </ul>
        </div>
    </div>
    <div class="goods-two in">
        <span>美食酒饮</span>
        <div class="goods-two-menu">
            <ul class="goodtwo-ulone">
                <li><a href="javascript:;"><img src="./picture/goodfour1.webp" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour1.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour2.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour3.png" alt=""></a></li>

            </ul>
            <ul class="goodtwo-ultwo">
                <li><a href="javascript:;"><img src="./picture/goodfour4.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour5.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour6.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour7.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./picture/goodfour8.png" alt=""></a></li>

            </ul>
        </div>
    </div>
    <!-- 右侧固定的标签 -->
    <div class="right-block">
        <a href="javascript:;"><i class="fas fa-shopping-cart"></i><p>购物车</p></a>

        <a href="javascript:;"><i class="fas fa-headphones"></i><p>在线客服</p></a>

        <a href="javascript:;"><i class="fas fa-hand-holding-heart"></i><p>自助服务</p></a>
        <a href="#top" id="topto"><i class="fas fa-upload"></i><p>返回顶部</p></a>
    </div>
    <div class="foot out">
        <a href="javascript:;"><div class="footin in"></div></a>
    </div>
    <!-- //设置左侧的广告栏 -->
    <div class="toptell">

    </div>

    <script>
        var ul=document.getElementById('imglist');
        var imgarr=imglist.chidren;
        var aul=document.getElementById('squar');
        var alla=aul.getElementsByTagName('a');
        //设置a1的默认样式
        var index =0;
        alla[index].style.backgroundColor = 'orange';
        for(var i=0;i<alla.length;i++){
            alla[i].num=i;
            alla[i].onmousedown = function(){
                clearInterval(alto);
                index = this.num;
                setA();
                ul.style.left = -1519.2*index+'px';
            }
            alla[i].onmouseup=function(){
                altochange();
            }

        }
        //设置点击索引样式
        function setA(){
            if(index>=6){
               index=0;
               ul.style.left =0+'px';
            }

           for(var i=0;i<alla.length;i++){
                alla[i].style.backgroundColor="";
           }
           alla[index].style.backgroundColor='orange';
        }
        //设置左右点击切换图片效果
        var leftjian =document.querySelector('.leftjian');
        var rightjian =document.querySelector('.rightjian');
        leftjian.onclick= function(){
            clearInterval(alto);
            index--;
            if(index<0){
                index=6;
            }
            index=index%6;
            move(ul,'left',50,-1519.2*index,function(){
                setA();
                altochange();
            });
        }
        rightjian.onclick= function(){
            clearInterval(alto);
            index++;
            if(index>=6){
                index=5;
            }
            index=index%6;
            move(ul,'left',50,-1519.2*index,function(){
                setA();
                altochange();
            });
        }
 //设置自动切换效果
        var alto;

      function altochange(){
            alto = setInterval(function(){
                index++;
               index = index%7;
                move(ul,'left',50,-1519.2*index,function(){
                setA();
            });
            },5000);
        }
        altochange();

//move函数 用于属性变化
function move(obj,attr,speed,target,callback){
    clearInterval(obj.timer);

    var current = parseInt(getStyle(obj,attr));
    if(current>target){
        speed=-speed;
    }
    obj.timer = setInterval(function(){
        var oldleft = parseInt(getStyle(obj,attr));
        var newleft = oldleft+speed;
        if(newleft>target&&speed>0||newleft<target&&speed<0){
            newleft = target;
        }
        obj.style[attr] = newleft+'px';
        if(newleft==target){
            clearInterval(obj.timer);
            callback();
        }

    },20);
}

    function getStyle(obj,name){
        if(window.getComputedStyle){
            return getComputedStyle(obj,null)[name];
        }else{
            return currentStyle[name];
        }
    }
    //设置右边的固定栏
    var rigbl = document.querySelector('.right-block');
        var body =document.documentElement;
        var topto = document.getElementById('topto');
        var timetext =setInterval(function(){
        if(parseInt(body.scrollTop)>=600){
            rigbl.style.height= 300+'px';
            topto.style.display="block";
        }else{
            rigbl.style.height= 225+'px';
            topto.style.display="none";
        }
        },20);
    </script>
    <script>
        var toptell = document.querySelector('.toptell');
        var activeday = new Date('2021-11-11 00:00:00');
        var fuday=activeday.getTime();

        setInterval(function(){
        var now = Date.now();
        var elsetime = fuday - now;
        var day = parseInt(elsetime/1000/60/60/24);
        var hours = parseInt(elsetime/1000/60/60%24);
        var minite = parseInt(elsetime/1000/60%60);
        var second  = parseInt(elsetime/1000%60);
        toptell.innerHTML="距离活动结束还有："+day+'天'+hours+'小时'+minite+'分钟'+second+'秒'+"\n 赶快抢购吧！！！"
        },30);
    </script>
</body>
</html>