小米商城练习

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">   <!--新建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">
            <!-- logo -->
            <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="搜索" ><!--value=" "也可有字 字是作为初始留在框里--><input type="submit" class="btn" value="url"> <!-- type是类型 submit发送 text文本 passwor密码-->
                <!-- input 为行间元素  所以如果换行 就会有空格显示 -->
            </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;
}

猜你喜欢