小米商城练习

矫情吗；* 2022-04-22 12:06 235阅读 0赞

HTML和js部分

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>mi</title>
        <link rel="stylesheet" href="css\mi.css">   
        <link rel="stylesheet" href="css\font.css">
    </head>
    <body>
        
        <div class="top">
            <div class="con">
                
                <div class="nav">
                    <a href="#">小米商城</a><span class="shu">|</span>
                    <a href="#">MIUI</a><span class="shu">|</span>
                    <a href="#">IOT</a><span class="shu">|</span>
                    <a href="#">云服务</a><span class="shu">|</span>
                    <a href="#">金融</a><span class="shu">|</span>
                    <a href="#">有品</a><span class="shu">|</span>
                    <a href="#">小爱开放平台</a><span class="shu">|</span>
                    <a href="#">政企服务</a><span class="shu">|</span>
                </div>
                
                <div class="nav-cart">
                    <a href="#"><span class="glyphicon glyphicon-list"></span>&nbsp&nbsp购物车</a>
                </div>
                
                <div class="nav" style="float: right">
                    <a href="#">登录</a><span class="shu">|</span>
                    <a href="#">注册</a><span class="shu">|</span>
                    <a href="#">消息通知</a><span class="shu">|</span>
                </div>
            </div>
        </div>
        
        
        <div class="among">
            <div class="con">
                
                <div class="logo">
                    <a href="#"><img src="images/logo.png" alt="null"></a>
                    <a href="#"><img src="images/gif.gif" alt="null"></a>
                </div>
                
                <div class="list" >
                    <ul>
                        <li><a href="#">小米手机</a> </li>
                        <li><a href="#">红米</a> </li>
                        <li><a href="#">平板</a> </li>
                    </ul>
                </div>
                
                <div class="search">
                    <input type="text" class="text" placeholder="搜索" ><input type="submit" class="btn" value="url"> 
                    
                </div>
            </div>
        </div>
        
    
    <div class="play">
            
            <div class="pic">
                <img src="images/1.jpg" alt="null" style="width: 1226px; height: 460px;">
                <img src="images/2.jpg" alt="null">
                <img src="images/3.jpg" alt="null">
                <img src="images/4.jpg" alt="null">
                <img src="images/5.jpg" alt="null">
            </div>
           
           <div class="list">
               <ul>
                   <li class="active"></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
           </div>
    
           
           <div class="jiantou">
               <img src="images/icon-left2.png" alt="null" class="left">
               <img src="images/icon-right2.png" alt="null" class="right">
           </div>
       </div>
    
    
       <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
       <script type="text/javascript">
           var time=0; //定义一个数 为 time
           timeplay = null;
    
    
           $(".play .list ul li").mouseover(function(){
        //js语法 $("...")谁 .函数(function(){内容 既具体干什么}) 调用那些函数干什么  
               clearInterval(timeplay); //消除时钟
               index=$(this).index();//获取序号
             //alert(index);//显示提示
               $(this).addClass("active").siblings().removeClass("active");
               //$(this)在本段程序所代表的地方执行js函数，函数为addClass("active")加入一个类
               //.siblings(那个地方)函数表示当执行前一个的时候，剩下的执行后面一个的函数.removeClass()移除一个类
               $(".play .pic img").eq(index).show().siblings(".play .pic img").hide();
               //eq()获取函数，show显示函数，hide隐藏函数。
           }).mouseout(function(){  //鼠标离开时 触发
               aa();
           });
    
       // 自定义函数 //自己滑动
       aa();
       function aa(){
           //设置时钟        
           timeplay=setInterval(function(){ //设置时钟函数 相当于一个可以控制时间的循环
               time++; 
               // alert(time); //输出time
               if(time<5){
                   $(".play .list ul li").eq(time).addClass("active").siblings(".play ul li").removeClass("active");
                   $(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
               }
               else{
                   time = -1;
               }
           },1000);
       }
    
       //左切换
       $(".play .jiantou .left").click(function(){
            time--;
            if(time >= 0){
                $(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
                $(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
            }else{
                time = 5;
                $(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
                $(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
            }
           
       });
       //放在箭头上 停止滑动
       $(".play .jiantou .left").mouseover(function(){
           clearInterval(timeplay);
       }).mouseout(function(){
           aa();
       });
    
    
       //右切换
       $(".play .jiantou .right").click(function(){
            time++;
            if(time <= 4){
                $(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
                $(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
            }else{
                time = -1;
                $(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
                $(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
            }
           
       })
       //放在箭头上 停止滑动
       $(".play .jiantou .right").mouseover(function(){
           clearInterval(timeplay);
       }).mouseout(function(){
           aa();
       });
    
    
       </script>
    </body>
    </html>

css部分

*{
        margin: 0px; padding: 0px;
    }
    .top{
        width: 100%;
        height: 40px;
        background: #333;
        font-size: 10px;
        font-family: 微软雅黑；
    }
    .top .con{
        width: 1226px;
        height: 40px;
        margin: 0 auto;
    }
    /* 列表 */
    .top .con .nav{
        height: 40px;
        line-height: 40px;
        float: left;
    }
    .top .con .nav a{
        color: #b0b0b0;
        text-decoration: none;
    }
    .top .con .nav a:hover{
        color: #fff;
    }
    .top .con .nav .shu{
        margin: 0 0.5em;
        color: #424242;
    } /* 1em=1字体大小*/
    
    /* 购物车 */
    .top .con .nav-cart{
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        float: right;
        background: #424242
    }
    .top .con .nav-cart a{
        color: #fff;
        text-decoration: none;
    }
    
    /* 中间栏 */
    .among{
        height: 100px;
        width: 100%;
        /* background: cornsilk; */
    }
    .among .con{
        width: 1226px;
        height: 100px;
        margin: 0 auto;
        /* background-color: white; */
        line-height: 100px;
        font-size: 10px;
        font-family: 微软雅黑；
    }
    /* logo */
    .among .con .logo{
        float: left;
        width: 250px;
        height: 100px;
    }
    /* logo居中 */
    .among .con .logo a{
        line-height: 100px;
    }
    .among .con .logo a img{
        vertical-align: middle;
    }
    /* 列表 */
    .among .con .list{
        height: 100px;
        line-height: 100px;
        float: left;
    }
    .among .con .list ul li{
        width: 100px;
        list-style: none;
        float: left;
        text-align: center;
    }
    .among .con .list a{
        color: black;
        text-decoration: none;
        display: block;
        width: 150px;
        height: 100px;
    }
    .among .con .list a:hover{
        color: red;
    }
    /* 搜索框 */
    .among .con .search{
        float: right;
        height: 100px;
        width: 296px;
        line-height: 100px;
    }
    .among .con .search .text{
        height: 48px;
        width: 228px;
        border: 1px solid red;
    }
    .among .con .search .btn{
        width: 52px;
        height: 50px;
        background: url(images/b.png);
        border: 1px solid red;
        transition: background 1% ease-in 1%;
    }
    .among .con .search .btn:hover{
        background: url(images/c.png)
    }
    
    /* 轮播图 */
    *{
        margin: 0px;
        padding: 0px;
    }
    .play{
        width: 1226px;
        height: 460px;
        /* background: red; */
        margin: 0 auto;
        position: relative; /*相对定位 作为参照物 不移动*/
        overflow: hidden; /*超出部分隐藏*/
    }
    .play .list ul{
        width: 200px;
        height: 30px;
        background: rgba(0,0,0,0);
        position: absolute; /*相对定位 要移动*/
        bottom: 20px;  /*相对定位后会跟方位词 top left right bottom*/
        right: 0;
    }
    .play .pic img{
        width: 1226px;
        height: 460px;
    }
    .play .list ul li{
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        border-radius: 10px;
        list-style: none;
        line-height: 20px;
        text-align: center;
        margin-left:5px;
        float: left;
    }
    /* 箭头 */
    .play .left{
        position: absolute; top: 45%; left: 0;
    }
    .left:hover{
        background: rgba(0,0,0, 0.3)
    }
    .play .right{
        position: absolute; top: 45%; right: 0;
    }
    .right:hover{
        background: rgba(0,0,0, 0.3)
    }
    /* 动画  原点变白*/
    .active{
        background-color: aliceblue;
    }